Demo here

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

Answer 2

您可以像这样使用css display:table-cell写

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

选中此http://jsfiddle.net/sandeep/weGGn/9/

您也可以使用position:absolute，但在这种情况下，您必须定义height的{{1}}。查看这篇文章http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

查看这篇文章http://www.student.oulu.fi/~laurirai/www/css/middle/可能对您有所帮助

Answer 3

您可以使用table-cell - 但仅在较新的浏览器中支持。我不确定版本号（但我认为它就像IE8 +和FF6 +）

但如果您不担心与旧浏览器的兼容性，请使用table-cell。否则你必须使用负边距和类似的东西。

您可以在此处阅读：http://phrogz.net/css/vertical-align/index.html

Answer 4

下面：

#main {
   height:600px;
   width:600px;
   background-color: blue;
   position: absolute;
}

#description {
   display:block;
   height:50%;
   width: 50%;
   margin: 25% auto;
   position:relative;   
   font-size:18px;
   background-color: red;

}

jsfiddle Here

设置在另一个div内的div中间

4 个答案:

Demo here