css實(shí)現(xiàn)元素垂直居中顯示的7種方式

發(fā)布時(shí)間：2020-09-04 16:07:33 作者：_之遙

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

三種對(duì)比總結(jié)

當(dāng)居中元素知道寬高的時(shí)候，設(shè)置居中的方式比較簡(jiǎn)單單一。三種方法的本質(zhì)是一樣的，都是對(duì)居中元素進(jìn)行絕對(duì)定位，在定位到上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)方式，只不過(guò)當(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é)果

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

優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：flex布局靈活，不需要對(duì)子元素進(jìn)行任何的設(shè)置
缺點(diǎn)：具有兼容性。子元素的float、clear、position等無(wú)法使用，如果同時(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é)果