最近開始倒回來看看CSS這塊兒有什么不太了解的地方需要鞏固！呵，好家伙！一番折騰之后我發(fā)現(xiàn)還真有很多不太了解的。真是學(xué)無止境啊...CK說網(wǎng)上有很大概15種可以讓CSS元素居中的方法。Oh,賣糕的！這是逼我查資料到夜晚兩點的節(jié)奏么？

閑話休體，現(xiàn)在我們來進入正題咯：

先來說說水平居中。

CSS水平居中的方法:

1、最常見的margin方法：

給元素設(shè)置一個顯示式的寬度，然后加上margin的左右值為auto，示例：


上面這個是有帶有寬度的div塊。如果是沒有設(shè)置的div塊，我們還可以這樣設(shè)置，exp:


如此這般！就可以了！

0表示設(shè)置元素center的上下外邊距為0。

優(yōu)點：實現(xiàn)方法簡單易懂，瀏覽器兼容性極強；
缺點：擴展性差，無法自適應(yīng)未知項狀況，而且容易出現(xiàn)元素擠壓的情形

2、text-again：center

這是大家都很熟悉并且經(jīng)常使用到的文本居中。簡單、快捷，暴力、方便。缺點就是只能用于文本
還是做個例子：


第二種就醬紫了。

3、使用inline-block 和 text-again 使塊級元素居中的方法：


使用該方法的關(guān)鍵點在于需要在元素的父級元素中設(shè)置text-center屬性為center

這中方法簡單，擴展性強。缺點就是要解決inline-block的兼容的問題。

4、利用浮動的包裹性和相對定位的百分比數(shù)據(jù)值特性，傳說稱之為“相對浮動”：

這里我給大家做個例子大家就都明白了.


通過給父元素設(shè)置浮動float和相對定位在向左移動50%，再給元素設(shè)置浮動float和相對定位并讓其向右移動50%來實現(xiàn)的水平居中。
優(yōu)點：擴展性強，兼容性強；
缺點：使用了浮動需要清除，并且該方法理解起來比較困難。

5、使用絕對定位和負邊距居中；


該方法在不知具體寬度時并無法使用，我們可以和方法四結(jié)合起來：


優(yōu)點：擴展性強，兼容性強；

缺點：理解起來較為困難。

6、CSS3的flex（伸縮盒模型）實現(xiàn)水平居中。


優(yōu)點：實現(xiàn)便捷，擴展性強；
缺點：兼容性差。

7、CSS3的fit-content實現(xiàn)水平居中方法。


優(yōu)點：簡單易懂，擴展性強；
缺點：瀏覽器兼容性差。

8、利用table元素實現(xiàn)水平居中。


使用table作為容器的方法來實現(xiàn)，添加了無意義的標簽。

table標簽本身并不是塊級元素，當(dāng)我們不設(shè)置table的寬度的時候，table里面的寬度 是由它內(nèi)部的元素的寬度撐起來的，這樣我們就可以通過設(shè) 置table水平居中從而使它內(nèi)部的元素居中了。

優(yōu)點：簡單易懂；
缺點：增加了無意義的標簽。

9、通過設(shè)計隱藏的div框來使顯示的內(nèi)容居中。


center寬度將自適應(yīng)，左右兩邊邊距均為div的寬度,因為左右兩邊div隱藏，所以我們見到的內(nèi)容將居中對齊；

優(yōu)點：簡單易懂；
缺點：局限性太大。

10、padding方法。


使內(nèi)容的左右兩邊有相同的內(nèi)邊距，那么在用戶眼中的內(nèi)容就是居中對齊的。

優(yōu)點：簡單易懂；
缺點：使用時需要不斷調(diào)試距離，比較麻煩。

CSS垂直居中的方法:

1、行高line-height設(shè)置；


使用行高line-height設(shè)置垂直居中只需要使行高和元素高度一樣即可。

優(yōu)點：使用方便，簡單易懂；
缺點：元素內(nèi)內(nèi)容只能是文本和圖片，而且文本和圖片不能共存，不然效果差到惡心。

2、絕對定位和負邊距是元素垂直居中。


優(yōu)點：結(jié)果簡單明了，使用方便；
缺點：由于固定高度，當(dāng)文本內(nèi)容超過限制時，將出現(xiàn)不可預(yù)料的情況。

3、使用display：table-cell 和 vertical-align 使元素垂直居中


優(yōu)點：適用范圍廣，簡單易懂；
缺點：兼容性問題。

4、使用padding讓元素內(nèi)容垂直居中。


不給容器固定高度，并在容器上下設(shè)置相同的padding值。

優(yōu)點：簡單易懂，結(jié)構(gòu)清晰，并且兼容所有瀏覽器；
缺點：不能給容器固定高度。

最新評論