css - 在绝对定位的 div 中垂直对齐文本

Question

我想将我的 div 中的文本垂直居中，但 vertical-align:middle 不起作用。

这是我的CSS:

body,html {
    height:100%;
    min-height:100%;
}
#container {
    position:relative;
    width:300px;
    height:70%;
    background:red;
}

#box {
    position:absolute;
    bottom:30px;
    background:yellow;
    height:20%;
    vertical-align:middle;
    width:100%;
    text-align:center;
}

这是我的 html:

<div id="container">
    <div id="box">
        <p>text</p>
    </div>
</div>

我尝试用 % 从顶部留出边距，但这不是最好的解决方案。这是我的在线版本:http://jsfiddle.net/f2qf031h/

Answer 1

一种方法是使用 flexbox 布局。

通过设置:

#box {
   ...
   display:flex;
}

#box p{
    align-self:center;
    text-align:center;
    width:100%;
}

jsfiddle:http://jsfiddle.net/f2qf031h/2/