CSS 9種方法實現不定寬高的垂直水平居中（乾貨）-css教學-PHP中文網

CSS 9種方法實現不定寬高的垂直水平居中（乾貨）

Guanhui

發布： 2020-05-08 10:27:48

轉載

4120 人瀏覽過

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

1、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 掛在父級元素，才能使得其中唯一的子元素居中。

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

登入後複製

3、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 中，替換掉絕對定位。效果是一樣的。

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

登入後複製

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

登入後複製

這種方法一般用於彈出層，需要設定彈出層的寬高。

6、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 的寫法了。

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

8、::after

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

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

登入後複製

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
}
.wrapper::after {
    content: &#39;&#39;;
    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: &#39;&#39;;
    height: 100%;
}
.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}

登入後複製

font-size: 0; 的神秘之處在於，可以消除標籤之間的間隙。另外，因為偽元素搭配的，都是最基礎的 CSS 寫法，所以不存在相容性的風險。

推薦教學：《CSS教學》

以上是CSS 9種方法實現不定寬高的垂直水平居中（乾貨）的詳細內容。更多資訊請關注PHP中文網其他相關文章！