垂直和水平响应式居中文本

Question

我正在尝试使用视差jquery pluin制作一个网站，我希望第一张"幻灯片"是屏幕中央的标题。

我一直在努力做到这一点 - 水平对齐它很简单，但我不能垂直对齐它。

有没有一种方法可以做到这一点，它既有效又响应迅速？我包括一个小提琴，向您展示基本结构 - http://jsfiddle.net/SohamK/yKDWS/1/。我还复制了下面小提琴的html：

<div class="container">
<div class="title">
    <h1> My Title </h1>
</div>

任何帮助将不胜感激！

谢谢！

Answer 1

你可以

像这样使用display属性：

.container {
    width:100%;
    height:100%;
    display:table;
    text-align:center;
 }
.title {
  display:table-cell;
  vertical-align:middle;
}

演示 http://jsfiddle.net/yKDWS/13/

Answer 2

$(function() {
$('h1').css({
    'position' : 'absolute',
    'left' : '50%',
    'top' : '50%',
    'margin-left' : -$(this).width()/2,
    'margin-top' : -$(this).height()/2
  });
});

试试这个与 jquery

Answer 3

可以使用

CSS属性display:table，并使用vertical-align:middle&text-align:center。这完美地将您的文本垂直和水平居中在您的div 中。

您的div .container将有一个display:table，您的div .title将与属性vertical-align:middle display:table-cell。

检查"我是否可以使用"显示：表浏览器兼容性"。

完整的 CSS 将如下所示 -

.container {
    display:table;
 }
.title {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

Answer 4

基本上，这将始终将其与垂直中间对齐

  .title
    {
        margin-top:25%;
    }

演示在这里

您的页面的确切标记是什么，这取决于此。

如果上面的演示解决了它，它很好，否则需要标记！！ :)

Answer 5

试试这个： 演示在这里

.CSS

.container {
    width:500px;
    height:300px;
    background:#333;
    display: table;
}
.title {
    color:#fff;
    padding:0;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}