在網頁頁面的開發中，文本豎直對齊是一個非常重要的問題。在CSS中有多種方式可以實現文本的豎直對齊，但今天我們要介紹的是使用display和line-height屬性。 首先，我們需要一個包含文本的DIV元素。然后我們將該DIV元素的display設置為table-cell，并設置其vertical-align屬性為middle。這樣，文本就會在該元素中垂直居中對齊。 下面是示例代碼：

<div style="width: 200px; height: 100px; display: table-cell; vertical-align: middle; border: 1px solid black;">
<p>這是一段文本</p>
</div>

在上面的代碼中，我們定義了一個寬度為200px，高度為100px的DIV元素，并將其display屬性設置為table-cell。然后我們定義了一個包含文本的P元素，并將其置于DIV元素中。最后我們將DIV元素的vertical-align屬性設置為middle，以實現文本在元素中的豎直居中對齊。 另一種方式是使用line-height屬性。如果我們將該元素的line-height屬性設置為其高度，文本也可以在元素中垂直居中對齊。下面是示例代碼：

<div style="width: 200px; height: 100px; line-height: 100px; border: 1px solid black;">
<p>這是一段文本</p>
</div>

在上面的代碼中，我們定義了一個寬度為200px，高度為100px的DIV元素，并將其line-height屬性設置為100px。然后我們定義了一個包含文本的P元素，并將其置于DIV元素中。這樣，文本就可以在元素中垂直居中對齊。 總的來說，使用display和line-height屬性可以輕松實現文本的豎直對齊。選擇哪種方式取決于具體情況。在實際開發中，可以根據需要靈活運用這兩種方式。