在進行網頁布局時，我們經常遇到需要將文本水平居中或垂直居中的情況。這篇文章將介紹如何使用 CSS 實現 h3 文字的垂直居中。 首先，我們需要了解的是，實現垂直居中最常用的方式是通過使用 display 和 vertical-align 屬性。由于 h3 元素是塊級元素，可以通過設置 display 屬性為 inline-block 或者 table-cell 將其轉化為行內元素或表格單元格，從而使其可以設置 vertical-align 屬性。 以下是使用 inline-block 實現 h3 垂直居中的示例代碼：

h3 {
display: inline-block;
vertical-align: middle;
}

以上代碼將 h3 元素轉化為行內塊，并將其垂直對齊方式設置為中間。此時，如果 h3 元素的高度小于其父元素的高度，就可以實現垂直居中。 在實際使用中，我們可能還需要將其父元素設置為相對定位，以便于下面的絕對定位元素能夠相對于父元素定位。

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

另一種實現 h3 垂直居中的方式是通過使用表格單元格，以下是示例代碼：

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

以上代碼將父元素設置為表格，將 h3 元素設置為表格單元格，并將其垂直對齊方式設置為中間。此時，如果 h3 元素的高度小于其父元素的高度，就可以實現垂直居中。 綜上所述，通過使用 display 和 vertical-align 屬性，我們可以很方便地實現 h3 文字的垂直居中。需要特別注意的是，父元素的高度必須大于 h3 元素的高度，否則無法實現垂直居中。