将一个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;
}

此处演示

Answer 2

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

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

检查这个http:// /jsfiddle.net/sandeep/weGGn/9/

您还可以使用 position:absolute 但在这种情况下，您必须定义该 的 height div。检查这篇文章 http://www.jakpsatweb.cz/css/css- Vertical-center-solution.html

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

Answer 3

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

但是如果您不担心与旧浏览器的兼容性，请使用表格单元格。否则你必须使用负边距之类的东西。

您可以在这里阅读： http://phrogz.net/css/vertical-align/索引.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 这里