CSS如何不定義寬高實現(xiàn)垂直水平居中？針對這個問題，今天小編總結(jié)這篇有關(guān)垂直水平居中的文章，可供感興趣的小伙伴們參考借鑒，希望對大家有所幫助。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,根河網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:根河等地區(qū)。根河做網(wǎng)站價格咨詢:18980820575

1、flex

大家的第一反應(yīng)，可能就是 flex 了。因為它的寫法夠簡單直觀，兼容性也沒什么問題。是手機端居中方式的選。

   
horizontal and vertical

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

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

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

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

2、flex + margin

這是 flex 方法的變種。父級元素設(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

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

.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 一樣，需要寫在父級元素上。

   
horizontal and vertical

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

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

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

使用絕對定位布局，設(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

這個方法可以改變文字的顯示方向，比如讓文字的顯示變?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;
}

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

7、grid

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

   
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

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

.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; 的神秘之處在于，可以消除標簽之間的間隙。另外，因為偽元素搭配的，都是最基礎(chǔ)的 CSS 寫法，所以不存在兼容性的風險。

看完這篇文章，你們學會不定義寬高實現(xiàn)垂直水平居中的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：CSS如何不定義寬高實現(xiàn)垂直水平居中-創(chuàng)新互聯(lián)
當前URL：http://weahome.cn/article/jpsih.html