绝对div垂直对齐中心

Question

我有这个简单的HTML代码，但是让我感到沮丧，因为它不能垂直地居中：

<div class="outer">
    <div class="inner">
        Hello World
    </div>
</div>

这是我的CSS：

.outer {
    position: relative;
    height: 350px;
}

.inner {
    position: absolute;
    height: 100px;
    top: 50%
}

.inner div实际上是垂直中心的，但是基于它的顶部。因为有了top: 50%，我想要的是这个.inner div实际上是垂直地居中于.outer之上。怎么做？

Answer 1

因为您知道这两个元素的高度，所以可以将顶部设置为top: 125px;。

(350-100)/ 2。

用JQUERY http://jsfiddle.net/yf0ncd7f/更新的

Answer 2

即使您不知道维度，也可以使用css3对元素进行居中。

.inner {
    position: absolute;
    height: 100px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Answer 3

可以按行高属性将其设置为div的高度，就像在代码中应该是line-height: 100px;一样。

​

.outer {
    position: relative;
    height: 350px;
    background: gray;
}

.inner {
    position: absolute;
    height: 100px;
    line-height: 100px;
    background: blue;
}

<div class="outer">
    <div class="inner">
        Hello World
    </div>
</div>

​