CSS常見布局垂直居中是網(wǎng)頁(yè)開發(fā)中一個(gè)經(jīng)常用到的技巧。本文將介紹幾種實(shí)現(xiàn)垂直居中的方法。

方法一：使用table布局

.container {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

該方法中，父元素設(shè)置display:table，子元素設(shè)置display:table-cell和vertical-align:middle實(shí)現(xiàn)垂直居中。

方法二：使用flex布局

.container {
display: flex;
align-items: center;  
justify-content: center;
}

該方法中，父元素設(shè)置display:flex，align-items:center和justify-content:center實(shí)現(xiàn)垂直居中。

方法三：使用position和transform

.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

該方法中，父元素設(shè)置position:relative，子元素設(shè)置position:absolute、top: 50%和transform:translateY(-50%)實(shí)現(xiàn)垂直居中。

方法四：使用grid布局

.container {
display: grid;
place-items: center;
}

該方法中，父元素設(shè)置display:grid和place-items:center實(shí)現(xiàn)垂直居中。

以上是CSS中常見的幾種實(shí)現(xiàn)垂直居中的方法，不同場(chǎng)景和需求下可以選擇不同的方式實(shí)現(xiàn)。希望本文能夠?qū)ψx者有所幫助。