垂直對齊在div中心的圖像

Question

我想垂直對齊並在水平中心對齊圖像。目前我的代碼只能用於水平對齊，現在我想要垂直對齊。你能幫我麼？

這裏是我的CSS代碼：

.centre 
{ 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
} 

img 
{ 
    vertical-align: middle; 
} 

Answer 1

上.centre只需使用display:table-cell;。下面是一個清楚地顯示它的例子，只需相應地更改選擇器即可。 http://jsfiddle.net/Y6NTf/

Answer 2

另一種選擇是設置imgposition相和top和left到50%。 Here是一個完整的工作示例。

HTML：

<div id="myDiv"> 
    <img id="myImg" src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hat/arrow_black.png"></img> 
</div> 

CSS：

#myDiv { 
    height: 300px; 
    width: 300px; 
    background: grey; 
} 

#myImg { 
    position:relative; 
    top: 50%; 
    left: 50%; 
}