css中實現元素垂直居中的方法

本篇文章給大家分享的是有關css中實現元素垂直居中的方法，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

absolute + 負margin

代碼實現

.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

代碼實現

.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

代碼實現

.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%后再拉回居中元素的一半寬高實現真正的居中。三種方式的區別就在于拉回元素本身寬高的方式不同。

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

absolute + transform

代碼實現

.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%);
}

運行結果

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

優缺點
優點：自動計算本身的寬高
缺點：如果同時使用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;
}

運行結果

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

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

table-cell布局

代碼實現

.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;
}

運行結果

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

table元素

代碼實現

.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;
}

運行結果

以上就是css中實現元素垂直居中的方法，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。