摘要：前言一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。又必須有個(gè)父級(jí)對(duì)其進(jìn)行設(shè)置居中。

一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。

行內(nèi)元素水平居中

行內(nèi)元素的居中比較簡(jiǎn)單，直接使用text-align就可以達(dá)到居中效果

/* 行內(nèi)元素 */
.parent4 {
    text-align: center;
}

塊級(jí)元素水平居中(塊級(jí)水平居中方法列舉以下幾種)

margin auto

這是最常用到的塊級(jí)水平居中，利用margin:auto自動(dòng)達(dá)到居中的效果，不過前提是子元素必須知道寬度

缺點(diǎn)： 必須提前知道元素的尺寸

/* 必須設(shè)置子元素寬度 */
.child1 {
    width: 100px;
    height: 100px;
    margin: 0 auto; 
    background: aqua;
}

利用inline-block實(shí)現(xiàn)水平居中

缺點(diǎn): 必須有個(gè)父元素對(duì)其設(shè)置text-align

.parent2 {
  
    text-align: center;

}

/* 必須通過父元素 */
.child2 {
    display: inline-block;
    /*width: 100px;
    height: 100px;*/
    background: aqua;
}

利用css3新增的width屬性fit-content實(shí)現(xiàn)

很多情況下我們并不清楚一個(gè)元素的具體尺寸是多少，但是又要實(shí)現(xiàn)水平居中。這個(gè)時(shí)候我們想起float，自動(dòng)撐開寬高，但是可惜的是float的脫離了文檔流并不能用margin:auto去實(shí)現(xiàn)元素的水平居中。inline-block又必須有個(gè)父級(jí)對(duì)其進(jìn)行設(shè)置居中。css3新增加了width里的屬性實(shí)現(xiàn)了元素類似于float,inline-block的包裹效果，并且可以使用margin: auto進(jìn)行居中。fit-content會(huì)根據(jù)你的內(nèi)容去包裹你的元素。在此處不細(xì)說明，該興趣的小伙伴可以看看張?chǎng)涡窭蠋煂?duì)這幾個(gè)新增的屬性的講解

/* width的其他屬性 */
 .parent3 {
    width: fit-content;
    margin: 10px auto;
    background: aquamarine;

}

行內(nèi)元素垂直居中

line-height實(shí)現(xiàn)當(dāng)行文字垂直居中

  /* 行內(nèi)元素，當(dāng)行文字垂直居中 */
    .parent1 {
        height: 100px;
        line-height: 100px;
        background: wheat;
    }

塊級(jí)元素垂直居中(塊級(jí)元素居中的方法比較多，總結(jié)如下)

margin負(fù)邊距實(shí)現(xiàn)

該方法使用絕對(duì)定位利用margin負(fù)值將其居中，前提是需要 提前知道尺寸

優(yōu)點(diǎn)：兼容性不錯(cuò)

缺點(diǎn)： 需要提前知道尺寸

    .parent2 {
        position: relative;
        background: rosybrown;
        height: 100px;
    }
    .child2 {  
        background: blue;
        position: absolute;
        width: 80px;
        height: 40px;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -40px;
    }

如何在不知道尺寸的情況下垂直居中呢，CSS3——translate屬性的出現(xiàn)為我們提供了可能。該方法利用translate以自身的寬高為基準(zhǔn)來達(dá)到居中效果，相當(dāng)于margin負(fù)值的作用，不過我們不需要知道尺寸，translate幫我們解決了。transform中translate偏移的百分比值是相對(duì)于自身大小的，

優(yōu)點(diǎn): 不需要提前知道尺寸

缺點(diǎn): 兼容性不好(在移動(dòng)端上基本支持)

/* 塊級(jí)元素： 絕對(duì)定位 + transform  優(yōu)點(diǎn): 不需要提前知道尺寸
缺點(diǎn): 兼容性不好*/
.parent3 {
    position: relative;
    background: antiquewhite;
    height: 200px;
}
.child3 {
    background: salmon;
    position: absolute;
    width: 80px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

塊級(jí)元素：絕對(duì)定位 + margin: auto;

結(jié)合以上兩種，在介紹一個(gè)利用絕對(duì)定位的一個(gè)很好用的方法
這是從張?chǎng)涡窭蠋煹牟┛桶徇\(yùn)過來的詳情戳這里。

優(yōu)點(diǎn)：不需要根據(jù)寬高去做相應(yīng)的位移，自動(dòng)幫你居中好了，兼容性好

/* 塊級(jí)元素：絕對(duì)定位 + margin: auto; 優(yōu)點(diǎn)：不需要根據(jù)寬高去做相應(yīng)的位移，兼容性好 */
.parent4 {
    position: relative;
    background: wheat;
    height: 200px;
}
.child4 {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

利用display: table-cell實(shí)現(xiàn)垂直居中

display的table和table-cell一般情況下用的不多，所以很少有人去關(guān)注它。這個(gè)實(shí)現(xiàn)的原理就是把其變成表格樣式，再利用表格的樣式來進(jìn)行居中，在某些情況下還是很方便的。

/* 塊級(jí)元素：display: table-cell */
.parent5 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child5 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
 
/* 水平垂直居中 */
.parent7 {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}
.child7 {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

利用calc()計(jì)算屬性

缺點(diǎn): 兼容性差，需要計(jì)算，消耗性能，需要提前知道尺寸

.parent8 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child8 {
    top:-webkit-calc(50%-50px);
    top:-moz-calc(50%-50px);
    top:calc(50%-50px);
    left:-webkit-calc(50%-50px);
    left:-moz-calc(50%-50px);
    left:calc(50%-50px);
    width: 100px;
    height: 100px;
    background: blue;
    
}

利用偽元素實(shí)現(xiàn)居中(這個(gè)原理我還沒搞懂，但是實(shí)踐過真的ok)

.parent9 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child9 {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent9::before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

塊級(jí)元素：display: flex

缺點(diǎn)：在pc上兼容性不好

.parent10 {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;  /*垂直居中*/
    justify-content: center;  /*水平居中*/
}
.child10 {
    background: blue;
}

以上是分別總結(jié)了水平居中和垂直居中常用的方法，要想實(shí)現(xiàn)水平垂直居中可以自己組合搭配一下。方法目前總結(jié)了這幾種，之后有新的方法也會(huì)持續(xù)更新，未完待續(xù)連載中....