CSS是網(wǎng)頁開發(fā)不可或缺的一部分，其中垂直居中是一個很關(guān)鍵的技能。大多數(shù)人使用css來水平居中元素，但是垂直居中并沒有那么容易。下面將介紹幾種方法來實現(xiàn)css垂直居中。

/* 方法一： display: flex; */
.container {
display: flex; /* 父容器設(shè)置為 flex 布局 */
justify-content: center; /* 設(shè)置子元素水平居中 */
align-items: center; /* 設(shè)置子元素垂直居中 */
}
/* 方法二： position + top + transform */
.container {
position: relative; /* 父容器設(shè)置為相對定位 */
}
.child {
position: absolute; /* 子元素設(shè)置為絕對定位 */
top: 50%; /* 子元素向下偏移50%的高度 */
transform: translateY(-50%); /* 再向上移動子元素自身高度的50% */
}
/* 方法三：表格+table-cell */
.container {
display: table; /* 父容器設(shè)置為表格布局 */
height: 100%; /* 確定父容器的高度 */
}
.child {
display: table-cell; /* 子元素設(shè)置為表格單元格 */ 
vertical-align: middle; /* 設(shè)置子元素的垂直對齊方式為居中 */
}
/* 方法四： grid */
.container {
display: grid; /* 父容器設(shè)置為網(wǎng)格布局 */
}
.child {
justify-self: center; /* 子元素水平居中 */
align-self: center; /* 子元素垂直居中 */
}

以上是介紹了四種常見的css垂直居中方法，可以根據(jù)需求選擇一種適合的方法來實現(xiàn)垂直居中。