垂直中心HTML元素中動態的股利一個高度

Question

可能重複：
vertical-align: middle doesn't work

我怎樣才能確保<a></a>在這個div垂直居中，無論大小的div：

http://jsfiddle.net/XF9WM/

感謝

Answer 1

使用display:table和display:table-cell，這在所有的現代瀏覽器上運行（IE 8+）：

.post { 
    width: 200px; 
    height: 200px; 
    background: rgba(0,0,0,0.8); 
    display:table; 
} 

.post h2 { 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    display:table-cell; 
    vertical-align: middle; 
} 

.post h2 a { 
    color: #f7f7f7; 
    font-size: 2.2em; 
    font-weight: normal; 
    font-style: italic; 
    width: 100%; 
} 

Answer 2

[增訂]

你也可以做這樣的：jsFiddle

.post { 
    width: 400px; 
    height: 200px; 
    background: rgba(0,0,0,0.8); 
    position:relative;  
} 

.post h2 { 
    position:absolute; 
    top:50%; 
    width:100%; 
    text-align:center; 

} 

.post h2 a { 
    line-height:100%; 
    color: #f7f7f7; 
    font-size: 2.2em; 
    margin-top:-20px; 
    display: block; 
} 

Answer 3

給你的鏈接一個比文本更大的行高，並在中間垂直對齊。然後，絕對定位它的父的專區內是在top: 50%和利潤率最高減一半鏈接的行高：

jsFiddle

.post { 
    position: relative; 
} 
.post h2 { 
    text-align: center; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; 
} 
.post h2 a { 
    vertical-align: middle; 
    line-height: 300px; 
    white-space: nowrap; 
} 

它甚至在IE7。

Answer 4

我想實現它以不同的方式，（只是爲了好玩），而這一次是工作壓力太大： jsFiddle

的想法是用50％的高度的:before塊元素。

html, body{ 
height:100%; 
} 

.post { 
    width: 400px; 
    height: 300px; 
    background: rgba(0,0,0,0.8); 
} 

.post h2:before{ 
    content:""; 
    display:block; 
    height:50%; 
} 

.post h2 { 
    text-align:center; 
    height:100%; 
} 

.post h2 a { 
    color: #f7f7f7; 
    font-size: 2.2em; 
    margin-top:-20px; 
    display: block; 
} 

希望它可以幫助:-)

Answer 5

如果你不介意的話添加額外的HTML類，你簡單的方法是使用垂直對齊：中間。

http://jsfiddle.net/Wexcode/HtNJM/

<div class="post"> 
    <span></span><h2><a href="#">Hello!</a></h2> 
</div> 

CSS：

* { margin: 0; padding: 0; } 

.post { 
    background: rgba(0,0,0,0.8); 
    width: 200px; 
    height: 200px; } 

.post span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 

.post h2 { 
    position: relative; 
    text-align: center; 
    width: 100%; 
    vertical-align: middle; 
    display: inline-block; } 

.post h2 a { 
    color: #f7f7f7; 
    font-size: 2.2em; 
    font-weight: normal; 
    font-style: italic; 
    display: block; }