用純CSS讓div垂直置中

垂直置中在table裡很容易，只要在td加valign="middle"就可以了，不過要在div裡就不是那麼容易，div要水平置中可以使用"margin:0 auto;"，可是垂直置中卻不能用"margin:auto 0;"，不過還好有找到方法，很實用，可以學起來。

<div>
把我置中
</div>
我原本是使用這個方法，給div一個line-height，有了line-height就可以用css的垂直對齊了。

view plaincopy to clipboardprint?

1. div{  height:30px; line-height:30px; }  

不過缺點是只能單行對齊。

後來又看到一個方法，是把div模擬成table，這樣就可以作區塊的div對齊了。

<div id="wrap">
<div id="cell">
<div id="content">
要被置中的內容
</div>
</div>
</div>

然後將css這樣設：

view plaincopy to clipboardprint?

1. #wrap { display:table; }   
2. #cell { display:table-cell; vertical-align:middle; }  

就可以變成想要的垂直方向置中了，不過這個方法只適用在IE8以上，不過IE該死，有好方法還是可以學起來。

我是參考這篇文章，裡面還有好幾種方法，可以試試看。
CSS Vertical Align(用純CSS解決div垂直置中)

反應：