用純CSS讓div垂直置中
垂直置中在table裡很容易，只要在td加valign="middle"就可以了，不過要在div裡就不是那麼容易，div要水平置中可以使用"margin:0 auto;"，可是垂直置中卻不能用"margin:auto 0;"，不過還好有找到方法，很實用，可以學起來。
我原本是使用這個方法，給div一個line-height，有了line-height就可以用css的垂直對齊了。
不過缺點是只能單行對齊。
後來又看到一個方法，是把div模擬成table，這樣就可以作區塊的div對齊了。
然後將css這樣設：
就可以變成想要的垂直方向置中了，不過這個方法只適用在IE8以上，不過IE該死，有好方法還是可以學起來。
我是參考這篇文章，裡面還有好幾種方法，可以試試看。
CSS Vertical Align(用純CSS解決div垂直置中)
<div>
把我置中
</div>我原本是使用這個方法，給div一個line-height，有了line-height就可以用css的垂直對齊了。
- div{ height:30px; line-height:30px; }
不過缺點是只能單行對齊。
後來又看到一個方法，是把div模擬成table，這樣就可以作區塊的div對齊了。
<div id="wrap">
<div id="cell">
<div id="content">
要被置中的內容
</div>
</div>
</div>
然後將css這樣設：
- #wrap { display:table; }
- #cell { display:table-cell; vertical-align:middle; }
就可以變成想要的垂直方向置中了，不過這個方法只適用在IE8以上，不過IE該死，有好方法還是可以學起來。
我是參考這篇文章，裡面還有好幾種方法，可以試試看。
CSS Vertical Align(用純CSS解決div垂直置中)
留言