我們知道，在css中，有很多屬性都可以達(dá)到居中的效果，而作為一名前端開(kāi)發(fā)者，垂直居中要比水平居中麻煩的多，這是歷史遺留的問(wèn)題。
最初的css針對(duì)的主要是web文檔的布局，他對(duì)垂直方向的需求并沒(méi)有那么的強(qiáng)烈，以至于并沒(méi)有專(zhuān)門(mén)的設(shè)計(jì)來(lái)實(shí)現(xiàn)這一需求。
事實(shí)上在css領(lǐng)域，存在著三大經(jīng)典問(wèn)題，垂直居中，多列等高和寬度自適應(yīng)。
我們逐一來(lái)看一下這這三大經(jīng)典問(wèn)題。

垂直居中

在講垂直居中之前，我們順帶來(lái)說(shuō)一下水平居中，如果是塊級(jí)元素，可以在子元素中添加margin:0 auto，如果是行內(nèi)元素，可以直接添加一個(gè)text-align:center這是最為經(jīng)典的實(shí)現(xiàn)方式，當(dāng)然還有其他的方式，也可以參考下面垂直居中的一些方式，我們重點(diǎn)來(lái)講垂直居中，假設(shè)有這樣兩個(gè)元素：

<style>
        .parent{
            width: 100px;height: 100px;
            background-color: aquamarine;
        }
        .child{
            width: 100px;height: 10px;
            background-color: red;
        }
    </style>
    <div class="parent">
        <div class="child"></div>
    </div>

1. 絕對(duì)定位和負(fù)邊距

    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 50%;
        margin: -5px 0 0 0; /* 值得一提的是如果child的高度為10%，這里的負(fù)邊距可以改為-5% */
     }

2. 絕對(duì)定位和transform

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

3. 絕對(duì)定位和margin:auto

    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        top: 0;bottom: 0;
        margin: auto;
     }

4. 萬(wàn)能的偽元素

.child{
    margin-top: -5px;
}
.parent::before{
    content: '';
    height: 50%;
    display: block;
}

5. 表格布局table

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

6. 單行文本下的line-height
7. 彈性布局（flex）彈性布局下的實(shí)現(xiàn)實(shí)際不止這么一種方式這里提一下，后面會(huì)單獨(dú)開(kāi)一章節(jié)講彈性布局

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

多列等高

我們先來(lái)看一下這到底是一個(gè)什么問(wèn)題：

<style>
        .child{
            width: 100px;
            background-color: #2196F3;
            display: inline-block;
        }
    </style>
    <div class="parent">
        <div class="child">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
        <div class="child">內(nèi)容</div>
        <div class="child">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
    </div>

多列等高問(wèn)題

因?yàn)閮?nèi)容的不同這三列擁有各自的高度，怎么讓他們一樣高呢？

1. 真等高：flex布局
   這是最簡(jiǎn)單的一種方式，只需要給parent加一個(gè)屬性display:flex，因?yàn)閺椥圆季帜J(rèn)自帶等高布局的特點(diǎn)。
2. 真等高：利用table
   table布局同樣也具有等高的特性，這個(gè)也非常簡(jiǎn)單，給parent加一個(gè)屬性display:table，然后改變child的display為display:table-cell。
   3、假等高：利用子組件的內(nèi)外邊距（padding和margin）

.parent{
    overflow: hidden;
}
.child{
    display: inline-block;
    padding-top: 9999px;
    margin-top: -9999px;
}
/* 或者 */
.child{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    float: left;
}

4. 假等高：父容器漸變背景色

寬度自適應(yīng)

最后一個(gè)問(wèn)題就是在我們的多列布局中，最后一個(gè)div寬度自適應(yīng)的問(wèn)題，我們來(lái)看解決方法：
<style>
.parent{
width: 200px;height: 100px;
}
.child1{
width: 100px;height: 100%;
background-color: #2196F3;
display: inline-block;
}
.child2{
height: 100%;
background-color: rgb(44, 228, 27);
display: inline-block;
}
</style>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>

1. flex-group:1

.parent{
     display:flex;
}
.child2{
    flex-group:1; /* 或者直接flex:1也是一樣的效果 */
}

2. 依舊是table，將parent設(shè)置display:table，然后將child1設(shè)置為display:table-cell
3. float配合overflow:hidden

.child1{
    float: left;
}
.child2{
    background-color: rgb(44, 228, 27);
    overflow:hidden;
}

child2會(huì)默認(rèn)填滿(mǎn)整個(gè)parent，然后因?yàn)閛verflow的關(guān)系隱藏在child1下的部分。

4. 這里有一種特殊情況，如果子元素只有一個(gè)，需要定死一邊的寬度，往另外一遍填滿(mǎn)，還可以使用絕對(duì)定位加margin-left的方法

.parent{
     position: absolute;
}
.child{
    margin-left:100px;
}