在網頁設計中，我們經常需要使用文字垂直對齊的方式來使頁面布局更加美觀。在 CSS 中，有多種方式來實現文字的垂直對齊，本文將一一介紹。

//HTML 代碼
<div class="container">
<div class="box">
<p>這是一段要垂直對齊的文字</p>
</div>
</div>

1. line-height 方式

使用 line-height 屬性可以使文字垂直居中，例如在父元素中設置：

.container {
height: 200px;
line-height: 200px;
}
.box {
height: 100px;
width: 100px;
border: 1px solid #000;
}
.box p {
margin: 0;
}

此時，文字垂直居中。

2. display: table / table-cell 方式

使用 display 屬性，可以將元素設置為表格布局，進而使用 table-cell 實現垂直對齊。例如：

.container {
display: table;
height: 200px;
}
.box {
display: table-cell;
vertical-align: middle;
height: 100px;
width: 100px;
border: 1px solid #000;
}
.box p {
margin: 0;
}

此時，文字垂直居中。

3. flexbox 方式

使用 flexbox 可以更加靈活地實現元素的布局，例如：

.container {
display: flex;
height: 200px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
border: 1px solid #000;
}
.box p {
margin: 0;
}

此時，文字垂直居中。

總結：

以上三種方式都可以使文字垂直居中，但是它們適用的場景略有不同。line-height 方式適用于單行文字垂直對齊；表格布局適用于多行子元素的垂直對齊；flexbox 方式則適用于更加靈活的布局需求。