這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

【一】知道居中元素的寬高

absolute + 負(fù)margin

代碼實(shí)現(xiàn)

.wrapBox5{
width: 300px;
height: 300px;
border:1px solid red;
position: relative;
}
.wrapItem5{
width: 100px;
height: 50px;
position: absolute;
background:yellow;
top: 50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
}

運(yùn)行結(jié)果

absolute + margin auto

代碼實(shí)現(xiàn)

.wrapBox{
width: 300px;
height: 300px;
background: yellow;
position: relative;
}
.wrapItem{
width: 100px;
height: 50px;
background:green;
display: inline-block;
position: absolute;
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
margin:auto;
}

absolute + calc

代碼實(shí)現(xiàn)

.wrapBox6{
width: 300px;
height: 300px;
border:1px solid green;
position: relative;
}
.wrapItem6{
width: 100px;
height: 50px;
position: absolute;
background:yellow;
top: calc(50% – 25px);
left:calc(50% – 50px);
}

運(yùn)行結(jié)果

三種對比總結(jié)

當(dāng)居中元素知道寬高的時(shí)候，設(shè)置居中的方式比較簡單單一。三種方法的本質(zhì)是一樣的，都是對居中元素進(jìn)行絕對定位，在定位到上50%，左50%后再拉回居中元素的一半寬高實(shí)現(xiàn)真正的居中。三種方式的區(qū)別就在于拉回元素本身寬高的方式不同。

【二】居中元素的寬高未知

absolute + transform

代碼實(shí)現(xiàn)

.wrapBox{
width: 300px;
height: 300px;
background:#ddd;
position: relative;
}
.wrapItem{
width: 100px;
height: 50px;
background:green;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50% , -50%);
}

運(yùn)行結(jié)果

原理

原理類似于已知寬高的實(shí)現(xiàn)方式，只不過當(dāng)前居中元素寬高未知，所以需要自動(dòng)獲取當(dāng)前居中元素的寬高。translate屬性正好實(shí)現(xiàn)了該功能。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：自動(dòng)計(jì)算本身的寬高

缺點(diǎn)：如果同時(shí)使用transform的其他屬性會(huì)產(chǎn)生相互影響。

所以：在不使用transform的其他屬性時(shí)推薦使用該方式

flex布局

.wrapBox2{
width: 300px;
height: 300px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
/*注意：即使不設(shè)置子元素為行塊元素也不會(huì)獨(dú)占一層*/
.wrapItem2{
width: 100px;
height: 50px;
background:green;
}

運(yùn)行結(jié)果

原理

將父級元素設(shè)置為流式布局，根據(jù)flex布局的屬性特性，設(shè)置子元素居中。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：flex布局靈活，不需要對子元素進(jìn)行任何的設(shè)置

缺點(diǎn)：具有兼容性。子元素的float、clear、position等無法使用，如果同時(shí)具有其他布局，容易產(chǎn)生影響。

table-cell布局

代碼實(shí)現(xiàn)

.wrapBox3{
width: 300px;
height: 300px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.wrapItem3{
width: 100px;
height: 50px;
background:green;
display: inline-block;
}

運(yùn)行結(jié)果

原理

根據(jù)table的vertical-align屬性，可以在表格元素內(nèi)設(shè)置元素居中，再根據(jù)text-align設(shè)置水平居中

table元素

代碼實(shí)現(xiàn)

.tableBox{
border:2px solid yellow;
width: 300px;
height: 300px;
}
.tableBox table{
width:100%;
height:100%;
}
.centerWrap{
text-align: center;
vertical-align: middle;
}
.centerItem{
display: inline-block;
background:pink;
}

運(yùn)行結(jié)果

總結(jié)

使用table標(biāo)簽進(jìn)行布局，主要還是使用了vertical-align屬性和text-align屬性。但是相對于上一種方式，使用table標(biāo)簽會(huì)產(chǎn)生大量的冗余代碼。不推薦使用

文章來源：腳本之家，原文鏈接：https://www.jb51.net/css/743771.html

申請創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！