在網(wǎng)頁布局中，居中對于美化網(wǎng)頁視覺效果是至關(guān)重要的，而本文將會介紹如何用CSS將標(biāo)簽垂直居中。 標(biāo)簽垂直居中方法如下：在父級容器中使用display: table-cell; 和vertical-align: middle;屬性組合即可實(shí)現(xiàn)。 以下是實(shí)現(xiàn)代碼，段落和代碼分別使用p標(biāo)簽和pre標(biāo)簽：

.container {
display: table;
height: 300px;
}
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}

代碼解釋： 首先給包含需要垂直居中的元素的父級容器設(shè)置display: table;屬性，將其轉(zhuǎn)換為表格布局； 接著給需要垂直居中的元素設(shè)置display: table-cell;屬性，將其轉(zhuǎn)換為表格單元格布局，方便設(shè)置vertical-align: middle;屬性來實(shí)現(xiàn)垂直居中。 最后給需要垂直居中的元素設(shè)置text-align: center;屬性來實(shí)現(xiàn)水平居中。 這樣就可輕松實(shí)現(xiàn)垂直居中的效果，使頁面更加美觀。