CSS如何實(shí)現(xiàn)垂直水平居中？相信大部分人都還沒(méi)學(xué)會(huì)這個(gè)技能，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話(huà)不多說(shuō)，一起往下看吧。
CSS3 的網(wǎng)格布局。還有偽元素的方法，是的，你沒(méi)有看錯(cuò)，::after 和 ::before 也可以實(shí)現(xiàn)居中。
1、flex
大家的第一反應(yīng)，可能就是 flex 了。因?yàn)樗膶?xiě)法夠簡(jiǎn)單直觀，兼容性也沒(méi)什么問(wèn)題。是手機(jī)端居中方式的選。
horizontal and vertical
重慶分公司
重慶分公司
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}利用到了 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 “擠” 到了中間。
horizontal and vertical
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: flex;
}
.wrapper > p {
margin: auto;
}3、transform + absolute
這個(gè)組合，常用于圖片的居中顯示。
.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 一樣，需要寫(xiě)在父級(jí)元素上。
horizontal and vertical
.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）。
horizontal and vertical
.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>
horizontal and vertical
.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 的寫(xiě)法了。
7、grid
像表格一樣，網(wǎng)格布局讓我們能夠按行或列來(lái)對(duì)齊元素。然而在布局上，網(wǎng)格比表格更可能做到或更簡(jiǎn)單。
horizontal and vertical
.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è)例子：
.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; 共同施展的魔法。
.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)閭卧卮钆涞?，都是最基礎(chǔ)的 CSS 寫(xiě)法，所以不存在兼容性的風(fēng)險(xiǎn)。
以上就是CSS實(shí)現(xiàn)垂直水平居中的九種方法了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
