CSS 中垂直居中元素是實現(xiàn)網(wǎng)頁布局的重要技術之一，而實現(xiàn)垂直居中元素的方法又有很多種，下面介紹三種常見的垂直居中方式。

1. 行高垂直居中

.parent {
height: 200px;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}

首先，我們將父元素的高度設定好，例如 200px，并將行高設置為相同的 200px。然后使用 inline-block 屬性將子元素轉變?yōu)閮嚷?lián)盒子并設置 vertical-align 屬性到 middle，實現(xiàn)垂直居中。

2. 絕對定位垂直居中

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

使用絕對定位和 transform 屬性可以實現(xiàn)元素的垂直居中。首先，設置父元素的 position 屬性為 relative，然后將子元素的 position 屬性設為 absolute，再將 top 屬性設為 50%，最后使用 transform: translateY(-50%) 將元素移動到中心。

3. Flexbox 垂直居中

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
display: inline-block;
}

使用最新的 Flexbox 屬性可以讓元素更加方便地實現(xiàn)垂直居中。設置父元素的 display 屬性為 flex，然后將 justify-content 和 align-items 屬性同時設為 center 即可實現(xiàn)垂直居中。為了避免子元素在父元素內占據(jù)全部空間，將子元素的 display 屬性設置為 inline-block。