Question

我想将文本垂直居中于div中，但是vertical-align：middle not working。

这是我的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/

Answer 2

试试此代码

#box {
    position: relative;
    top:50%;
    transform: translateY(-50%);
    background:yellow;
    height:20%;
    width:100%;
    display: table; 
    overflow: hidden;
    text-align:center;
}

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

2 个答案: