? ? ? ? 在開發前端頁面的時候，元素的居中是一個永遠都繞不開的問題?？此坪唵蔚木又卸?#xff0c;其實蘊含著許許多多的情況，對應著很多的處理方法，本文就試圖對頁面布局中的居中問題進行總結~~

? ? ? ? 居中問題分為水平居中和豎直居中兩種；而根據所居中元素的不同，有內聯元素居中和塊級元素居中兩種居中問題。下面開始分類整理：

一、內聯元素的居中

? ? ? ? 1、內聯元素的水平居中：在父元素上設置text-align:center;

? ? ? ? ? ? ? （為了節省空間、突出重點，每個選擇器中無關緊要的樣式我都會全部寫在第一行，從第二行開始是關鍵樣式~ 下同）

? ? ? ? 2、單行內聯元素的豎直居中：設置內聯元素的行高等于容器的高度

? ? ? ? 3、多行內聯元素的豎直居中：用具有塊級屬性的容器包裹起來，然后應用下方塊級元素的相關方法。

二、塊級元素的居中

? ? ? ? 1、塊級元素的水平居中：設置居中元素的margin屬性： margin: 0 auto;

? ? ? ? 2、高度固定的塊級元素的豎直居中：相對于父元素進行絕對定位，設置top:50%;并設置margin屬性為自身高度一半的負值：

? ? ? ? ? ? ? 原理：設置了top:50%;之后，該元素的上邊沿正好在父元素的中心上，此時讓這個元素向上方移動自身高度的一半，就可以使這個元素的中心與父元素的中心重合，達到豎直居中的效果。此原理也可應用至水平居中的應用上。

? ? ? ? 3、高度可變的塊級元素的豎直居中：利用display:table-cell，利用表格中的豎直居中來實現。(此方法不兼容IE7及以下版本的瀏覽器)

? ? ? ? 4、容器高度不固定元素的豎直居中： 手動設置內部元素的上下邊距相等

三、塊級內聯元素的居中

? ? ? ? 1、水平居中： 方法等同內聯元素的水平居中方法

? ? ? ? 2、豎直居中： 方法等同塊級元素的豎直居中方法

四、各種不尋常的居中方法

? ? ? ? 上面所述的都是面對那些分類情況中第一時間應當想到的尋常方法，在居中問題中還有很多原理不尋常的方法，下面嘗試進行總結（有的方法上面已經有所應用）

? ? ? ? 1、利用display:table-cell進行布局：

? ? ? ? ? ? ? 我們都知道，表格中提供了非常方便的居中屬性，在DIV+CSS布局還未到來的時代，居中對于前端人員來說（那時似乎也沒有前端這個職位23333）并不是個問題。但是在web的新時代中，再使用table進行大布局就顯得有些XXXX了。還好新版的CSS為我們提供了display：table-cell的選項，使得一個普通的div也可以表現的像一個表格單元格，從而可以通過直接設置text-align:center; vertival-align:middle;通殺一切居中的效果（塊級元素水平居中需在塊級元素上加margin: 0 auto;）。 這使得table-cell成為了新一個布局神器，然而因為兼容性問題，所以這個方法似乎還沒有太大規模的使用。

? ? ? ? 2、使用絕對定位+負邊距的方法：

? ? ? ? ? ? ? 這種方法的原理在前面“高度固定的塊級元素的豎直居中”部分已經有介紹。在水平居中中同樣可以使用，將相應屬性換成水平方向的對應屬性即可。這種方法的缺點在于，需要預先知道居中元素的寬高，不適用于寬高可變的元素。

? ? ? ? 3、使用絕對定位+transform的方法：

? ? ? ? ? ? ? 這種方法是對上方負邊距方法的一個改進。一般來說，CSS中距離單位使用百分比時，都是根據父元素的寬高來計算的。而transform：translate()方法在使用百分比單位時，是以自身的寬高進行計算的，這就彌補了負邊距方法中“必須預先獲知元素寬高”這一缺陷了。

? ? ? ? ? ? ? ?當然，缺陷也很明顯：translate是CSS3中的內容，并不兼容IE6、7、8。（手動冷漠臉）

? ? ? ? 4、使用絕對定位+auto邊距的方法：

? ? ? ? ? ? ? 使居中元素相對于其父元素絕對定位，設置居中方向上的偏移值為0（兩方向都要設置），然后設置居中方向上的margin值為auto（同樣兩個方向都要設置），即可實現居中。下圖為水平豎直居中的例子。

? ? ? ? ? ? ? ?這種方法有兩個負作用：1、居中元素的盒模型中margin部分會填充整個父容器，可能會影響同等級其他元素的布局。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、不能用于高度可變元素。例如對一個高度可變的內容容器使用本方法，其高度會自動拉伸至100%，失去高度隨內容自適應的性質。

? ? ? ? 5、浮動元素的水平居中

? ? ? ? ? ? ? 對于一群浮動元素的居中，可以使用以下辦法：精確計算浮動元素的總寬度及邊距，設置一個寬度等與此值的塊級容器，使得浮動元素在此容器內浮動，而此容器相對原先的父容器水平居中。

? ? ? ? ? ? ? 對于單個浮動元素的居中。。。。。。就剩一個元素了還浮動個毛線！

? ? ? ? 6、一種非常奇怪的方法。。。使用font-size實現豎直居中

? ? ? ? ? ? ??居然還能用這個？？？？？？

? ? ? ? ? ? ? 這種方法僅僅在IE6和IE7中有效，可以看作對table-cell方法的補充。在高度固定的父元素中，設置font-size的值為高度除以1.14得到的值（手動十個尼克楊問號臉），子元素為內聯或塊級內聯元素并設置vertical-align:middle，可以實現豎直居中。?

? ? ? ? ? ? ? 下面是這個方法與table-cell方法的結合，使用了css hack，可以兼容所有瀏覽器。

? ? ? ? 7、引入新的不可見元素實現居中

? ? ? ? ? ? ? 這種方法的原理和上面提到的絕對定位系列方法是類似的。對于單個高度（寬度）固定的元素，可以在同級添加一個div，設置其高度為50%，并設置下邊距為居中元素高度一半的負值（這里替換成上面給居中元素設置的負邊距或者translate都可以），即可完成居中效果：

? ? ? ? ? ? ? 當然，這里面的#another也可以通過偽元素實現：

? ? ? ? ? ? ? 需要注意的是，使用此方法實現水平居中時，需要給兩個子div和偽元素設置display:inline-block樣式，否則塊級元素自帶的換行效果會使得這種方法失效。

? ? ? ? 來做一個小的總結吧。在頁面布局的時候，使用CSS進行居中操作，根據情況的不同，有著各種各樣不同的方法。而這些各種各樣的方法，也都有著各種各樣的優劣，有的需要提前確定元素的寬高，有的存在兼容性問題。這就需要我們在開發的過程中，根據實際情況靈活選用方法，并加以自己的修改，方可實現各種居中~~上面這些方法已經足夠應對大部分場景，如果遇到了更加奇妙的方法，我也會更新這篇博文與大家分享的~

? ? ? ??

轉載于:https://www.cnblogs.com/zhuwq585/p/6075113.html

總結

以上是生活随笔為你收集整理的CSS中各种各样居中方法的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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