CSS水平或垂直居中技巧

CastlePeaK 發(fā)布于2019-08-30 11:22 / 2301人閱讀

摘要：適用情景單對(duì)象水平居中原理將子元素設(shè)置塊級(jí)表格，再設(shè)置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個(gè)合在一起就能實(shí)現(xiàn)水平和垂直均居中。

前言

css水平和垂直居中是一個(gè)亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧，在兩年前面試的時(shí)候，我完全不知道如何做到水平和垂直均居中的方法，那場(chǎng)面別提有多尷尬了（ps：特想找個(gè)地洞鉆進(jìn)去）。。。時(shí)隔兩年，對(duì)于這個(gè)問題算是有一些了解了，現(xiàn)做個(gè)小小的整理，也算是對(duì)自己學(xué)習(xí)的總結(jié)。

注：文中例子沒寫明html代碼時(shí)，使用的是下面結(jié)構(gòu)：


    
        超級(jí)好用超級(jí)放心    
        在線壓縮圖片
        壓縮完可以

只是類名會(huì)有所不同。

1、Line-height

適用情景：?jiǎn)涡形淖郑ù怪本又校?br>原理：將單行文字的行高設(shè)定后，文字會(huì)位于行高的垂直中間位置。
html：

Lorem ipsam.

css：

.example{
    width: 400px;
    background: #afddf3;
    line-height: 50px;
}

效果：

2、Line-height + inline-block

原理：將多個(gè)元素或多行元素當(dāng)成一個(gè)行元素來看待，所以我們必須要將這些數(shù)據(jù)多包一層，并將其設(shè)定為inline-block。由于inline-block在不同瀏覽器會(huì)有空隙產(chǎn)生，因此設(shè)定父元素font-size：0來消除，從而達(dá)到完美的垂直居中。
css：

.example2{
    width: 400px;
    border: 1px solid #dcdcdc;
    line-height: 100px;
    font-size: 0;
}
.example2 .con {
    display: inline-block;
    line-height: 2;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

3、:before + inline-block

原理：:before 偽類元素搭配 inline-block 屬性的寫法應(yīng)該是很傳統(tǒng)的垂直居中的技巧了，此方式的好處在于子元素居中可以不需要特別設(shè)定高度，我們將利用:before偽類元素設(shè)定為100%高的inline-block，再搭配上將需要居中的子元素同樣設(shè)置成inline-block性質(zhì)后，就能使用vertical-align: middle來達(dá)到垂直居中的目的了，此方式在以往其實(shí)是個(gè)非常棒的垂直居中解決方案，唯獨(dú)需要特別處理掉inline-block元素之間的4-5px空間這個(gè)小缺陷，不用怕，設(shè)置父元素font-size: 0，子元素font-size: 15px即可。
css:

.example3 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example3::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.example .con {
    width: 300px;
    font-size: 15px;
    background: #afddf3;
    display: inline-block;
    vertical-align: middle;
}

4、table + margin

適用情景：?jiǎn)螌?duì)象（水平居中）
原理：將子元素設(shè)置塊級(jí)表格，再設(shè)置水平居中。
css:

.example4 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table;
    margin: 0 auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

5、table + table-cell + vertical-align: middle

適用情景：多對(duì)象（垂直居中）
html:


    
        超級(jí)好用超級(jí)放心    
        在線壓縮圖片
        壓縮完可以打包下載哦  
    
    
        CSS-TRICKS

css:

.example5 {
    display: table;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

6、absolute + margin 負(fù)值

原理：設(shè)置絕對(duì)定位，top: 50%;后，再設(shè)置高度一半的負(fù)值實(shí)現(xiàn)。說來說去，這就是一道簡(jiǎn)單的數(shù)學(xué)題而已。
缺陷：需要設(shè)置居中元素的高度。
優(yōu)勢(shì)：無瀏覽器兼容性問題
css:

.example6 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example6 .con {
    position: absolute;
    top: 50%;
    height: 80px;
    margin-top: -40px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

7、absolute + margin auto

原理：當(dāng)元素設(shè)置為絕對(duì)定位后，假設(shè)它是抓不到整體可運(yùn)用的空間范圍，所以margin: auto會(huì)失效，但當(dāng)你設(shè)置了top:0;bottom:0;時(shí)，絕對(duì)定位元素就抓到了可運(yùn)用的空間了，這時(shí)你的margin:auto就生效了。
缺陷：定位元素必須有固定的寬高（百分比也算）。
css:

.example7 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example7 .con {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

8、absolute + translate

原理：利用絕對(duì)定位時(shí)的top 與right設(shè)置元素的上方跟左方各為50%，再利用transform: translate(-50%, -50%);位移居中元素自身寬與高的50%就能達(dá)成居中的目的了。
缺陷：translate是css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢(shì)：無需固定定位元素的寬高。
css:

.example8 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example8 .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    background: #afddf3;
}

9、Flex + align-items

適用情景：多行文字（垂直居中）
原理：彈性布局，align-items定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢(shì)：無需固定定位元素的寬高，代碼干凈利索。
css:

.example9 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example9 .con {
    font-size: 15px;
    background: #afddf3;
}

10、Flex + justify-content

適用情景：多行文字（水平居中）
原理：彈性布局，justify-content設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢(shì)：無需固定定位元素的寬高，代碼干凈利索。
css:

.example10 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    height: 80px;
    font-size: 15px;
    background: #afddf3;
}

11、Flex + :before + flex-grow

適用情景：多行文字（垂直居中）
原理：彈性布局，F(xiàn)lex-direction：column;將項(xiàng)目垂直顯示，正如一個(gè)列一樣。flex-grow: [number];規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持，并且難度稍大，一般不會(huì)想到這種方法。
顯著優(yōu)勢(shì)：無需固定定位元素的寬高
css:

.example11 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example11:before {
    content: "";
    flex-grow: .5;
}
.example11 .con {
    font-size: 15px;
    background: #afddf3;
}

12、Flex + margin

缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example12 {
    display: flex;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example12 .con {
    margin: auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

13、Flex + align-self

原理：align-self定義flex子項(xiàng)多帶帶在側(cè)軸（縱軸）方向上的對(duì)齊方式。
缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example13 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example13 .con {
    align-self: center;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

14、Flex + align-content

原理：align-content在彈性容器內(nèi)的各項(xiàng)沒有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)（垂直），彈性項(xiàng)目有多項(xiàng)此屬性才會(huì)發(fā)揮作用。
缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example14 {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
    content: "";
    display: block;
    width: 100%;
}
.example14 .con {
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

下面是一個(gè)比較常見的例子,往往是不想讓圖片發(fā)生變形并且不管尺寸大小均會(huì)顯示在容器的正中央（以下例子應(yīng)用的是第8條）。
html:

css:

.imgbox-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.imgbox {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ebf8ed;
    overflow: hidden;
}
.imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

結(jié)語：有些是水平居中，有些是垂直居中，將它們某兩個(gè)合在一起就能實(shí)現(xiàn)水平和垂直均居中。不過我相信肯定不止這些方法，還有其他的值得我們?nèi)ヌ骄俊Ｈ粑闹杏绣e(cuò)，請(qǐng)大家指正，謝謝！

云服務(wù)器 GPU云服務(wù)器水平垂直居中垂直居中實(shí)現(xiàn)垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114954.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CastlePeaK

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SkyNetHosting：$47.7/2年/50GB SSD空間/5TB流量/不限域名/香港/日本

閱讀 1487·2021-11-24 11:16
2021云計(jì)算十大關(guān)鍵詞：云原生、高性能、混沌工程、混合云、邊緣計(jì)算、零信任、優(yōu)化治理、數(shù)字政府、低

閱讀 2689·2021-07-28 12:32
CSS水平或垂直居中技巧

閱讀 2302·2019-08-30 11:22
重學(xué)前端學(xué)習(xí)筆記（二十四）--HTML里的鏈接元素

閱讀 1440·2019-08-30 11:01
移動(dòng)端開發(fā)單位——rem，動(dòng)態(tài)使用

閱讀 594·2019-08-29 16:24
關(guān)于HTTP那些事

閱讀 3547·2019-08-29 12:52
前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁添加JavaScript

閱讀 1625·2019-08-29 12:15
CSS之偽類元素

閱讀 1331·2019-08-29 11:18

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS水平或垂直居中技巧

相關(guān)文章

**對(duì)css居中的一點(diǎn)總結(jié)**

**純CSS實(shí)現(xiàn)元素垂直水平居中-非固定寬度**

**純CSS實(shí)現(xiàn)元素垂直水平居中-非固定寬度**

發(fā)表評(píng)論

0條評(píng)論

CastlePeaK

男|高級(jí)講師

TA的文章

SkyNetHosting：$47.7/2年/50GB SSD空間/5TB流量/不限域名/香港/日本

2021云計(jì)算十大關(guān)鍵詞：云原生、高性能、混沌工程、混合云、邊緣計(jì)算、零信任、優(yōu)化治理、數(shù)字政府、低

CSS水平或垂直居中技巧

重學(xué)前端學(xué)習(xí)筆記（二十四）--HTML里的鏈接元素

移動(dòng)端開發(fā)單位——rem，動(dòng)態(tài)使用

關(guān)于HTTP那些事

前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁添加JavaScript

CSS之偽類元素

最新活動(dòng)