CSS的居中方式

剛學習css的時候嘗試過幾種居中的方法,這些方法不需要借助js手段,所寫的方法有乙個原則,就是在不需要直接人為的設定好寬高計算後再實現居中,還有諸如table布局啊、行高設定、margin：auto之類的我就不寫了。

以下幾種方法針對不同的瀏覽器,經過測試,從ie8及以下到ie9+、safari都有不同的方法支援。

.wraper .wraper div 瓜迪奧拉克洛普克洛普克洛普克洛普克洛普克洛普克洛普孔蒂穆里尼奧

溫格

這種方法的原理是讓容器層和內層都相對自己移動,容器層移動自身寬度的50%,內層相對於移動自身寬度的-50%。這樣一來外部容器正好可以將內容垂直的包裹住,並且由於外部容器是浮動的,所以容器的寬度和內層的寬度一致,這樣可以做到完全自適應的實現居中。該方法適用於豎向排版的情況。

div

這個方法原理不太清楚,我是這樣理解的,當這個div**也去不了,然後margin還是auto的時候,他就只能相對於外部容器垂直居中了..

.parent .child /*.child一定要寫上font屬性,這個方法在ie中才會實現.*/

這個方法只有ie8及以下才可以實現,至今也沒明白父級的font-size屬性為什麼一定要等於寬度/114,ie真是乙個奇葩的存在...在虛擬機器下測試這個方法確實有效,子級一定要寫font-size屬性,即使沒有內容也要寫,否則無效。針對ie8以下的相容性時,這個方法可以作為一種hack使用。

ie是指9及以下,我只測試了這些版本的ie,另外safari也是不支援的。

.box .item

容器和內層都已經脫離了文件流,內層先移動自身的50%,再通過transform屬性移動自身的-50%,修正後的top、left就正好處於容器內的垂直居中位置了。

ie依然不支援css3是必須的,遺憾的是safari依然是不支援的,至少在我測試階段(5.1.7)window下還沒有支援。

#box #box div

flex針對垂直居中的方法比較直接,justify-content:center; align-self: center;這兩個屬性直接設定為center就可以了,在不支援css3的瀏覽器中是無法實現的,這也是flex的暫時的缺點之一。