CSS如何實(shí)現(xiàn)不定寬高的垂直水平居中

這篇文章主要為大家展示了“CSS如何實(shí)現(xiàn)不定寬高的垂直水平居中”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS如何實(shí)現(xiàn)不定寬高的垂直水平居中”這篇文章吧。

垂直居中，在 CSS 中是一個(gè)老生常談的問(wèn)題，面試的時(shí)候也會(huì)時(shí)常被提及。所以，今天我們就來(lái)聊聊 9 種不同的居中方法。

有常見(jiàn)的 flex、transform、absolute 等等。也有 CSS3 的網(wǎng)格布局。還有偽元素的方法，是的，你沒(méi)有看錯(cuò)，::after 和 ::before 也可以實(shí)現(xiàn)居中。

1、flex

大家的第一反應(yīng)，可能就是 flex 了。因?yàn)樗膶懛▔蚝?jiǎn)單直觀，兼容性也沒(méi)什么問(wèn)題。是手機(jī)端居中方式的首選。

<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;
}
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線以及規(guī)劃）

利用到了 2 個(gè)關(guān)鍵屬性：justify-content 和 align-items，都設(shè)置為 center，即可實(shí)現(xiàn)居中。

需要注意的是，一定要把這里的 flex-center 掛在父級(jí)元素，才能使得其中 唯一的 子元素居中。

2、flex + margin

這是 flex 方法的變種。父級(jí)元素設(shè)置 flex，子元素設(shè)置 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;
}

3、transform + absolute

這個(gè)組合，常用于圖片的居中顯示。

<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%);
}

當(dāng)然，也可以將父元素 wrapper 的相對(duì)定位，移入子元素 img 中，替換掉絕對(duì)定位。效果是一樣的。

4、table-cell

利用 table 的單元格居中效果展示。與 flex 一樣，需要寫在父級(jí)元素上。

<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;
}

5、absolute + 四個(gè)方向的值相等

使用絕對(duì)定位布局，設(shè)置 margin:auto;，并設(shè)置 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;
}

這種方法一般用于彈出層，需要設(shè)置彈出層的寬高。

6、writing-mode

這個(gè)方法可以改變文字的顯示方向，比如讓文字的顯示變?yōu)榇怪狈较颉?/p>

<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;
}

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

7、grid

像表格一樣，網(wǎng)格布局讓我們能夠按行或列來(lái)對(duì)齊元素。 然而在布局上，網(wǎng)格比表格更可能做到或更簡(jiǎn)單。

<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 及以上。

8、::after

偽元素也能用來(lái)實(shí)現(xiàn)居中么？感覺(jué)還是挺神奇的，看下面這個(gè)例子：

<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 往下拉到了中間。

9、::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; 的神秘之處在于，可以消除標(biāo)簽之間的間隙。另外，因?yàn)閭卧卮钆涞模际亲罨A(chǔ)的 CSS 寫法，所以不存在兼容性的風(fēng)險(xiǎn)。

以上是“CSS如何實(shí)現(xiàn)不定寬高的垂直水平居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！