設置在中間的另一格內一個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

您可以使用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 2

您可以使用表細胞 - 但它僅在新的瀏覽器支持。我不確定版本號（但我認爲它就像IE8 +和FF6 +）

但是，如果您不擔心與舊瀏覽器的兼容性使用表格單元格。否則，你必須使用負邊距和類似的東西。

你可以閱讀一下：http://phrogz.net/css/vertical-align/index.html

Answer 3

可以使用相對絕對定位來實現這一點：

#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 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