div的垂直水平居中應該是很常見的問題了，網上的方法也很多~總之就是要實現下圖這個效果：
我們慢慢來，先看看實現這個效果真正的難點（坑）在**~先不說具體的實現，很多人應該都熟悉margin：0 auto這個「標配」吧？這是讓div的上下margin變成0，左右margin自動計算，加上這一句很容易就能實現div的水平居中~不過為什麼不把上下左右的margin全部設定成auto呢？這樣不就上下左右都居中了？
那麼我來解釋一下：
首先，div是乙個塊級元素，寬度預設都是相對于父元素的100%，即：乙個塊元素，如果我們不人為的去設定它的寬度，他就單獨佔一行！換句話說，這一行就只有他乙個元素！想讓他水平居中，左右margin設定成auto後底層很容易就可以計算出margin具體的數值應該是多少，從而達成左右居中。說到這裡，我們再去考慮垂直居中：頁面在垂直方向上塊級元素不一定只有乙個，即塊級元素沒有「預設佔一列」這樣的規定，因此即使把margin設定成auto，也不能自動計算出margin到底該是多少......
了解了以上問題，我們便可以把中心轉移到垂直居中上面了~
法1：利用display：table-cell（相容ie8+）
.outerdiv
.innerdiv
缺點：對父元素的限制（無法設定margin等），相容ie8及以上（因為ie8以前的display不支援table-cell）
優點：同時有多個子元素也可以居中
思考 1：只寫vertical-align：middle可以完成子元素垂直居中嗎？
answer：no！為什麼？因為：
vertical-align是用來定義行內元素（inline）的基線相對於該元素所在行的基線的垂直對齊，也就是說，vertical-align的作用是調整當前元素（前提他是行內元素，或者有行內元素的特性）基線的位置，而這個元素的子元素預設都是跟基線對齊的。vertical-align是行內元素的乙個屬性（但是div是塊級元素！）。
因此，我們要想辦法讓父元素有inline的屬性，也就是讓他變成table-cell！
思考 1.1：如果不是table-cell，還有什麼方法讓父元素具有行內元素特性？
answer：當然可以直接把父元素設定成display：inline，但是他也就完完全全是乙個行內元素了，無法設定高度，寬度，margin這些......還有一點需要注意，設定成inline-block是不行的，div本身的內容還是塊級元素的特性。其他的方法我暫時沒有想到了......
法2：利用相對定位和絕對定位
第一種寫法：
.outerdiv
.innerdiv
.outerdiv
.innerdiv
優點：相容性好
缺點：子元素只能有乙個
關於這幾種方法，法1是原理比較難理解的，法2是比較常見的，當然具體選用哪種方法看各自的需要，需要多個子div居中選法1，乙個選法2，個人認為法1的相容性不是很突出的缺點~
css實現div水平 垂直居中
示例1 chrome33 ie8測試通過 示例2 chrome33 ie8測試通過 示例4 chrome33測試通過，ie8測試不通過，參考 注 對頁面中所有元素應用box sizing border box樣式是為了將padding margin值都計入width height中，即為元素指定的任...
Div實現水平垂直居中
在實際應用中很多地方不僅要求實現元素的水平居中或者垂直居中效果，還可能會在水平方向和垂直方向上都要實現居中效果，下面就簡單介紹幾種元素水平垂直居中的方法 注 不同的方法會存在一些優缺點以及相容性問題 hmtl結構 parent child 原理 元素設定定位並給定 50 的top值和left值，再通...
3行Css實現div水平 垂直居中
div 就像下面，只需要給.container三行css規則就可以使它在水平方向和垂直方向均處於居中。container 這個方法適用於所有現代瀏覽器 ie10 chrome瀏覽器，firefox和safari 與 webkit 字首 完整的相容性列表如下 height 450 width 600p...