您好,登錄后才能下訂單哦!
CSS如何不定義寬高實(shí)現(xiàn)垂直水平居中?針對(duì)這個(gè)問題,今天小編總結(jié)這篇有關(guān)垂直水平居中的文章,可供感興趣的小伙伴們參考借鑒,希望對(duì)大家有所幫助。
大家的第一反應(yīng),可能就是 flex 了。因?yà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;
}
利用到了 2 個(gè)關(guān)鍵屬性:justify-content 和 align-items,都設(shè)置為 center,即可實(shí)現(xiàn)居中。
需要注意的是,一定要把這里的 flex-center 掛在父級(jí)元素,才能使得其中 唯一的 子元素居中。
這是 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;
}
這個(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ì)定位。效果是一樣的。
利用 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è)置彈出層的寬高。
這個(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 的寫法了。
像表格一樣,網(wǎng)格布局讓我們能夠按行或列來對(duì)齊元素。 然而在布局上,網(wǎng)格比表格更可能做到或更簡單。
<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 及以上。
偽元素也能用來實(shí)現(xiàn)居中么?感覺還是挺神奇的,看下面這個(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 往下拉到了中間。
另一種是配合 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)閭卧卮钆涞?,都是最基礎(chǔ)的 CSS 寫法,所以不存在兼容性的風(fēng)險(xiǎn)。
看完這篇文章,你們學(xué)會(huì)不定義寬高實(shí)現(xiàn)垂直水平居中的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。