CSS垂直居中是前端開(kāi)發(fā)中使用頻率很高的一種布局方法，它能夠讓頁(yè)面中的元素在垂直方向上居中顯示，為用戶展示更好的閱讀體驗(yàn)和更美觀的頁(yè)面布局。本文將介紹8種常見(jiàn)的CSS垂直居中方式。

第一種：利用line-height屬性

.container {
height: 100px;
line-height: 100px;
}
.content {
display: inline-block;
vertical-align: middle;
}

第二種：利用flexbox布局

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

第三種：利用table-cell方法

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

第四種：使用absolute方法進(jìn)行居中

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

第五種：使用grid布局

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

第六種：使用calc方法計(jì)算偏移量

.container {
position: relative;
}
.content {
position: absolute;
top: calc((100% - 100px) / 2);
}

第七種：使用translate方法

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

第八種：使用偽元素:before方法

.container:before {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
vertical-align: middle;
}

以上8種CSS垂直居中方式都有各自的優(yōu)勢(shì)和適用場(chǎng)景，開(kāi)發(fā)者可以根據(jù)具體需求靈活選擇使用。