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

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

我要評論

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

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

absolute + 負margin

代碼實現(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;
}

運行結果

absolute + margin auto

代碼實現(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

代碼實現(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);
}

運行結果

三種對比總結

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

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

absolute + transform

代碼實現(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%);
}

運行結果

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

優(yōu)缺點
優(yōu)點：自動計算本身的寬高
缺點：如果同時使用transform的其他屬性會產生相互影響。
所以：在不使用transform的其他屬性時推薦使用該方式

flex布局

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

運行結果

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

優(yōu)缺點
優(yōu)點：flex布局靈活，不需要對子元素進行任何的設置
缺點：具有兼容性。子元素的float、clear、position等無法使用，如果同時具有其他布局，容易產生影響。

table-cell布局

代碼實現(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;
}

運行結果

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

table元素

代碼實現(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;
}

運行結果