在另一個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但在這種情況下，您必須定義該div height 。 檢查本文http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

檢查本文http://www.student.oulu.fi/~laurirai/www/css/middle/可能對您有所幫助

Answer 3

您可以使用表格單元格-但僅在較新的瀏覽器中受支持。 我不確定版本號（但我認為它類似於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 這里