CSS 不定寬高的垂直水平居中方式總彙
垂直居中，在css中是一個老生常談的問題，面試的時候也會時常被提及。所以，今天我們就來聊聊 9 種不同的居中方法。
有常見的 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: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrapper > img {
vertical-align: middle;
}水平方向很好理解。垂直方向，可以理解為 ::after 把 img 往下拉到了中間。
東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com
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;的神祕之處在於，可以消除標籤之間的間隙。另外，因為偽元素搭配的，都是最基礎的 CSS 寫法，所以不存在相容性的風險。
總結
今天共介紹了 9 種居中的方法。像 flex、absolute、grid，這些常用的方法往往可以在工作中，幫我們解決佈局的問題。而像 writing-mode、::after、::before，這些神奇的特性彷彿幫我們掀開了 CSS 魔法大陸的一角，讓人神往，忍不住想去探索更多。