css的幾種居中

首先，需要居中的元素分為三類：

1.普通的div

浮動元素

設定了絕對定位的元素

關於普通的div的居中

這個相對來說是比較簡單的，直接用margin:0 auto;

div

對於普通元素，像上面這樣新增樣式即可

關於浮動元素的居中問題

這個問題困擾了我很久，因為浮動元素不像普通的元素，margin的任何乙個方向設定auto都會變得無效。這樣一來，居中只能在給margin設定百分比或者固定值下手了。但是為什麼auto值對浮動元素無效，百分比和固定值卻有效呢？帶著這個問題我翻查了css中關於margin的一些值的定義，如下圖所示

這張圖列出了auto，固定值，百分比是如何計算的。我們可以看到，固定值和百分比是有具體的計算方案的，而auto是瀏覽器自動去計算。所以，在這裡浮動元素margin值設為auto無效。我認為是元素浮動之後脫離了文件流，瀏覽器找不到參照物去計算這個auto，所以就預設忽略掉了。

2.下面我們來看看如何居中浮動元素

div

我們給元素設定乙個左外邊距為50%，此時浮動元素的左邊框剛好落在頁面的中線上。但是我們要居中，是要將浮動元素的中軸落在頁面的中線，因此我們只需將元素在左移一半寬度的距離就可以了，在這裡我們用left:-?px實現，這個?是浮動元素寬度的一半，這裡即為left:-50px;

3.最後，關於設定了絕對定位的元素的居中問題我們先把外層的相對定位的大div用margin:0px auto;居中，然後再像上面的方案一樣：設定margin-left為50%，再設定left的值即可

#parent #son

以上就是我對各種元素浮動的理解，本人小白，可能對「margin的auto值在浮動元素中失效」這個問題理解的不好，歡迎各路大神前來指正。