html - 在中间设置一个 div 在另一个 div 里面

Question

我有以下 HTML 页面:

<div id="main">
    <div id="description">
        Some text
    </div>
</div>

使用以下 CSS:

#main {
    height:600px;
    vertical-align:middle;
}

#description {
    display:block;
    height:50%;
    width: 50%;
    margin: auto;
    font-size:18px;
}

使用此代码，description div 水平居中，但我想将其垂直居中。

你知道我该怎么做吗？

Answer 1

您可以使用相对-绝对定位来实现这一点:

#main
{
    height: 200px;
    position: relative;
    background-color: lime;
}
#description
{
    width: 50%;
    height: 50%;
    position: absolute;
    left: 25%; /* (100 - width)/2 */
    top: 25%; /* (100 - height)/2 */
    background-color: cyan;
}

Demo here