CSS居中的經常使用方式以及優缺點

前言

居中是頁面開發中常常遇到的問題。

使用合適的、簡單的、兼容性好的居中方式是咱們頁面仔在整個工做生涯中都要面對的問題。

text-align:center

來看這個例子，一張圖片和文字進行居中。以下圖所示：

img與文字內容都是行內元素，所以直接使用text-align就好了。代碼以下圖所示：

在最外層的div中使用text-align：center的問題是，會致使全部的子元素都會繼承這個屬性。若是還有一段文字用做介紹該圖片的做用時，這段文字也會被居中。

而咱們但願這段文字是左對齊的，就不得不單獨設置其text-align：left屬性，以覆蓋其父元素的屬性。而且若是還有更多的子元素也須要這樣作，覆蓋屬性自己就是下策，所以要採用其餘方法。

margin: 0 auto

因爲顯示的圖片多是變化的，寬高是不定的，但顯示區域是固定的，因此通常會顯式地給圖片設置一個寬高。這個時候知道寬度就能夠設置margin：0 auto方法，左右的margin設置爲auto，瀏覽器就會自動設置左右的margin值爲容器剩餘寬度的一半。

使用margin: 0 auto能夠說是最經常使用的左右居中的方法，不只適用於塊級元素也適用於行內元素。不少網頁的佈局都是使用margin: 0 auto，例如淘寶pc端，以下圖所示：

display: table-cell

第一個垂直居中的方法是藉助table-cell屬性，效果圖以下：

table-cell的一個好處就是它能夠兼容到IE8。

table-cell屬性的缺點：

• 容器的margin屬性失效，由於margin不適用於表格佈局。因此使用margin: 0 auto屬性是不能使container左右居中的。解決的方法也很簡單：只須要在container外層再多套一個div容器，而後設置這個外層容器的margin: 0 auto便可。
• 設置了table-cell的元素再設置寬高爲百分比是不起做用的。常見的場景是要將寬度屬性設置爲外層容器寬度的100%，解決方法是將container的寬度設置成一個很大的值，例如5000px，這樣就達到100%的目的。
• 若是container須要設置position爲absolute，table-cell屬性就會失效。由於設置position: absolute就會把元素display強制設置爲block類型。解決辦法仍是在外層套一層div容器，將position: absolute屬性做用於這個容器上。

position: relative

上面所說table-cell的第三缺點的解決方法有一個反作用，就是設置內層container的height和width爲百分比時會失效。因爲這個緣由，致使有一種狀況不能使用display：table-cell垂直居中。

就是須要在頁面彈出一個框，這個框的位置須要在當前屏幕中左右上下居中。這時候一般須要將這個框的position設置爲absolute，這個時候table-cell就不能發揮做用了。

解決辦法是使用relative定位，設置top爲50%，將彈窗的起始位置放到頁面中間，再設置margin-top爲元素高度的負一半，這樣使得彈窗在頁面中間位置再往上移到一半自身的高度，這就正好在中間了，左右居中也可相似處理。

使用此方法的缺點是須要知道具體的高度，沒法根據內容長短自適應。

tranform: translate

用tranform方法，將margin-top一個具體像素的負值改爲transform: translate(0, -50%)，由於translate裏面的百分比是根據元素自己的高度計算的，因此就能夠達到自適應的效果。

這個辦法十分方便，並且加上-webkit-前綴，能夠兼容到IE9。

而margin-top：-100px與transform：translate(0, -50%)都有一個缺點，就是若是設置left爲50%是藉助position爲absolute的話，可能會致使換行

原本應該是一行顯式的p元素卻換行了，這是由於在一個relative元素裏面的absolute定位的子元素會經過行內元素換行的方式，儘量不超過容器的邊界。因爲設置left爲50%，致使p元素超了邊界，因此就換行了，即便再設置translate：-50%也已經晚了。

flex佈局

flex佈局十分容器和方便，只需在副容器設置3個屬性就好了

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}
複製代碼

但flex的缺點是不支持IE

vertical-aligin:middle

vertical-aligin:middle主要是運用在行內元素中的。

若是不作任何處理，那麼默認的垂直居中是以baseline爲基準的。

爲了可以垂直居中，須要改變居中方式。

要每一個元素都要設置。

若是container的高度比圖片要高，就會有留空的效果，以下：

爲了讓中間的內容可以在container裏上下居中，能夠設置文字的line-height爲container的高度，這樣文字就上下居中了。因爲圖片與文字是垂直居中的，因此圖片在container裏也是上下居中了。

也就是說，若是須要垂直居中一個div裏的比div高度小的圖片，能夠添加一個元素，讓它的line-height等於div的高度。下面使用僞元素::before來添加line-height。

或者使用display: inline-block屬性，加上height: 100%。這個方法兼容性更好。

absolute與margin：auto

使用absolute定位與margin：auto方法也能夠實現居中。

若是圖片比container大，這種方法就不適用了。由於有一個種比較常見的場景：圖片有一邊和contianer同樣大，另外一邊按圖片的比例縮放，圖片居中顯示，超出的截斷。這種狀況下，只需把left/right/top/bottom設置爲一個很大的負值便可。

總結

以上就是css中經常使用的居中方法，若是有更好的方法能夠在評論區留言教教我。

參考

本文參考如下資料

• 盤點8種CSS實現垂直居中水平居中的絕對定位居中技術
• 六種實現元素水平居中
• 高效前端：Web高效編程與優化實踐

結尾

更多文章請移步樓主github,若是喜歡請點一下star,對做者也是一種鼓勵。