「乾貨」CSS 不定寬高的垂直水平居中（最全 9 種）

前言

垂直居中，在 CSS 中是一個老生常談的問題，面試的時候也會時常被說起。因此，今天咱們就來聊聊 9 種不一樣的居中方法。

有常見的 flex、transform、absolute 等等。也有 CSS3 的網格佈局。還有僞元素的方法，是的，你沒有看錯，::after 和 ::before 也能夠實現居中。

9 種方法呈現

一、flex

你們的第一反應，可能就是 flex 了。由於它的寫法夠簡單直觀，兼容性也沒什麼問題。是手機端居中方式的首選。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

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

利用到了 2 個關鍵屬性：justify-content 和 align-items，都設置爲 center，便可實現居中。

須要注意的是，必定要把這裏的 flex-center 掛在父級元素，才能使得其中 惟一的 子元素居中。

二、flex + margin

這是 flex 方法的變種。父級元素設置 flex，子元素設置 margin: auto;。能夠理解爲子元素被四周的 margin 「擠」 到了中間。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: flex;
}

.wrapper > p {
    margin: auto;
}

三、transform + absolute

這個組合，經常使用於圖片的居中顯示。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

固然，也能夠將父元素 wrapper 的相對定位，移入子元素 img 中，替換掉絕對定位。效果是同樣的。

四、table-cell

利用 table 的單元格居中效果展現。與 flex 同樣，須要寫在父級元素上。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

五、absolute + 四個方向的值相等

使用絕對定位佈局，設置 margin:auto;，並設置 top、left、right、bottom 的 值相等便可（不必定要都是 0）。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

這種方法通常用於彈出層，須要設置彈出層的寬高。

六、writing-mode

這個方法能夠改變文字的顯示方向，好比讓文字的顯示變爲垂直方向。

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    writing-mode: vertical-lr;
    text-align: center;
}

.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}

兼容性上還有些小瑕疵，但大部分瀏覽器，包括手機端已支持 writing-mode 的寫法了。

七、grid

像表格同樣，網格佈局讓咱們可以按行或列來對齊元素。 然而在佈局上，網格比表格更可能作到或更簡單。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: grid;
}

.wrapper > p {
    align-self: center;
    justify-self: center;
}

但它在兼容性上不如 flex，特別是 IE 瀏覽器，只支持 IE10 及以上。

八、::after

僞元素也能用來實現居中麼？感受仍是挺神奇的，看下面這個例子：

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}

水平方向很好理解。垂直方向，能夠理解爲 ::after 把 img 往下拉到了中間。

九、::before

另外一種是配合 font-size: 0; 共同施展的魔法。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
    font-size: 0;
}

.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: '';
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}

font-size: 0; 的神祕之處在於，能夠消除標籤之間的間隙。另外，由於僞元素搭配的，都是最基礎的 CSS 寫法，因此不存在兼容性的風險。

總結

今天共介紹了 9 種居中的方法。像 flex、absolute、grid，這些經常使用的方法每每能夠在工做中，幫咱們解決佈局的問題。而像 writing-mode、::after、::before，這些神奇的特性彷彿幫咱們掀開了 CSS 魔法大陸的一角，讓人神往，忍不住想去探索更多。

PS：歡迎關注個人公衆號 「超哥前端小棧」，交流更多的想法與技術。