今天遇到一個垂直居中的問題，調試了一個多小時，終于找到一個解決辦法，雖然不夠完美，但是能解決當前問題，現來總結一下居中的一些常見問題：

表格居中：這個最好解決，直接調用現成的CSS Style - vertical-align: middle

DIV居中：這個就挺麻煩，因為現成的CSS Style對DIV無效，所以只能想一些辦法來實現這種效果：

• 如果是單行文字垂直居中，那最好的解決方案是定義DIV的inline-height和height為相同的值（也就是DIV的高度），這樣就居中了；
• 利用padding設置垂直居中，我們知道padding是內邊距，如果設置內邊距上下相等，那么DIV不就居中了；

萬能方法：這個方案適用于所有的頁面元素，首先自己計算好元素占用了多少個像素和元素距離border-top的距離，直接更改padding-top的值為你計算的距離，這樣元素就垂直居中了。雖然有點投機取巧，但是能實現效果也不失為一種解決方案！

定義三個DIV，相互嵌套，如下圖最終想要居中的元素居中了，CSS為：

.outerDiv{height:100px;width:100px;position:relative;} .middleDiv{position:absolute;top:50%;} .innerDiv{position:relative;top:-50%;} ?

因為我要居中的元素是ul里面的li要垂直居中，所以只能用方法3了，以后如果有更好的方法，接著更新！

轉載于:https://www.cnblogs.com/garinzhang/archive/2012/07/04/2575888.html

總結

以上是生活随笔為你收集整理的HTML之垂直居中问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。