在你剛?cè)肭岸酥酰又羞@個(gè)問題有時(shí)候會帶給你一些煩惱沸柔，特別是垂直居中议惰，這篇博客將從水平居中——垂直居中——整體居中方面提供全套解決方案。

注：著急看垂直居中或者整體居中可以直接往后翻

水平居中

我們的需求是實(shí)現(xiàn)不定寬高的居中悲酷，初始代碼如下

    <div class="father" style="background-color:aqua">
        <div class="child" style="background-color: yellow">
            居中
        </div>
    </div>

結(jié)果是這樣的

1.png

很容易發(fā)現(xiàn)子元素占用了父元素的所有寬度。下面列出了三種水平居中的解決方案

1. text-align + inline-block

        .father{
            text-align: center;
        }
        .child{
            display: inline-block;
        }
inline-block: 收斂子元素的寬度使其寬度隨內(nèi)容而定亲善，text-align, 使收斂后的子元素居中

優(yōu)點(diǎn)：兼容性好舔涎，除了IE6,7之外，基本上無兼容問題逗爹。
缺點(diǎn)：text-align導(dǎo)致子元素內(nèi)容也居中，這在某些情況下是不希望見到的。

2. table + margin

table: 表面上像block掘而，其實(shí)他的寬度是跟著內(nèi)容走的于是乎我們可以這樣

        .father{}
        .child{
            display: table;
            margin: 0 auto;
        }

結(jié)果是這樣的

2.png

優(yōu)點(diǎn)：只作用父元素挟冠，兼容IE8及以上

3. relative + absolute

這個(gè)不多說，相信大家平時(shí)用的也比較多

        .father{
            position: relative;
        }
        .child{
            position: absolute;
            left:50%;
            transform: translateX(-50%);
        }

值得注意的是父元素相對定位后袍睡，其高度塌陷為0導(dǎo)致背景顏色無法顯示知染，但居中目的確實(shí)是達(dá)到了。

3.png

4. flex + justify

Flex:牽涉到彈性盒子布局斑胜，如果對此不了解控淡，很樂意當(dāng)一個(gè)傳送門
Flexbox
假定你已經(jīng)了解了Flex或者看完了上述介紹，那我就直奔主題直接給出代碼止潘。

        .father{
            display: flex;
            justify-content: center;
        }
        .child{}

優(yōu)點(diǎn)：簡單
缺點(diǎn)：兼容性掺炭，甚至在某些較新的非IE瀏覽器還依據(jù)需要加上廠商前綴

垂直居中

相信你對vertical-align不陌生，聽說可以使元素垂直居中凭戴，但為啥每次使用都沒效果涧狮，在這說明一下，vertical-align只對inline, inline-block, table等級別元素有效么夫，注意這里不包括block者冤。好了，直奔主題档痪。

1. table-cell + vertical

        .father{
            display: table-cell;
            vertical-align: middle;
        }

細(xì)心的你可能發(fā)現(xiàn)了子元素的寬度等同于父元素

5.png

優(yōu)點(diǎn)： 簡單涉枫，只作用于父元素
缺點(diǎn)： 除了很低版本的IE外，好像還真沒啥

2. absolute + transform

原理很簡單腐螟，直接給出代碼

        .father{
            position: relative;
        }
        .child{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
        }

6.png

這個(gè)剛好子元素的寬度為其內(nèi)容寬度愿汰。
缺點(diǎn)：兼容問題 詳查Can I use?

3. flex + align-items

不多說，你都看到這里,這就不是問題了遭垛，什么你真是跳著看的尼桶，好吧，再次勉為其難的送上一道傳送門锯仪。
Flex

        .father{
            display: flex;
            align-items: center;
        }

效果如上
缺點(diǎn)：兼容問題 詳查Can I use?

整體居中

1. inline-block + text-align + table-cell + vertical

思路很簡單泵督，先實(shí)現(xiàn)水平居中再實(shí)現(xiàn)垂直居中，你要反過來也可以庶喜。

        .father{
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            display: inline-block;
        }

2. absolute + transform

        .father{
            position: relative;
        }
        .child{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

7.png

3. flex + justify + align-items

        .father{
            display: flex;
            justify-content: center;
            align-items: center;
        }