CSS3中實(shí)現(xiàn)高度居中是很常見的操作，在很多的網(wǎng)頁設(shè)計(jì)中都會(huì)用到，下面便介紹一下CSS3中實(shí)現(xiàn)高度居中的方法。

.box {
display: flex; /* 修改容器為 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}

上面的示例代碼中，我們首先將容器的布局修改為flex布局，設(shè)置其子元素垂直居中和水平居中即可實(shí)現(xiàn)高度居中。

除了使用flex布局外，我們還可以使用絕對定位來實(shí)現(xiàn)高度居中，示例如下：

.box {
position: relative; /* 設(shè)定父元素 position 屬性為 relative */
}
.box .inner {
position: absolute; /* 設(shè)定子元素 position 屬性為 absolute */
top: 50%; /* 豎直方向居中 */
transform: translateY(-50%); /* 通過 translateY 轉(zhuǎn)換進(jìn)行調(diào)整 */
}

上面的示例代碼中，我們首先將父元素position屬性設(shè)為relative，然后通過子元素absoulte屬性及居中調(diào)整達(dá)到高度居中的效果。

除了以上兩種方法外，還有很多其他的方法可以實(shí)現(xiàn)高度居中，不同的方法用在不同的場景中，開發(fā)者可以根據(jù)自己的實(shí)際需要進(jìn)行選擇。