在 CSS 中垂直居中文字

1. 在 CSS 中使用 line-height 屬性垂直居中文字
2. 在 CSS 中使用 display、vertical-align 和 line-height 屬性垂直居中文字
3. 模擬表格顯示使 CSS 中的文字垂直居中

本文將介紹在 CSS 中垂直居中文字的方法。

在 CSS 中使用 line-height 屬性垂直居中文字

我們可以將 line-height 屬性的高度設定為 div 以在 CSS 中垂直居中文字。line-height 屬性指定線的高度。可以通過建立 div 元素的邊框來說明。我們還可以使用 text-align 屬性並將其設定為 center 以將文字水平居中對齊。

例如，在 HTML 中建立一個 div 並寫入文字 Hello World!之間。接下來，在 CSS 中，將 div 的高度設定為 200px。此外，將 line-height 設定為相同的值。使用 text-align 屬性將文字與 center 對齊。使用 border 簡寫屬性建立一個 3px 寬度的 black 顏色的 solid 邊框。

在下面的示例中，我們為 div 的 line-height 和 height 設定了相同的畫素。因此，它垂直居中文字。但是，此方法僅適用於單行文字。

示例程式碼：

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

在 CSS 中使用 display、vertical-align 和 line-height 屬性垂直居中文字

我們可以使用 display、vertical-align 和 line-height 等不同的 CSS 屬性將文字居中顯示在多行中。display 屬性設定元素的顯示行為。vertical-align 屬性負責元素的垂直對齊。我們可以將 display 設定為 inline-block，將 vertical-align 設定為 middle 來實現多行文字的垂直對齊。

例如，在 HTML 中建立一個 div 並在其中寫入 span。寫下文字 Hello 並用 <br> 換行，然後寫下 World!在 span 內。接下來，在 CSS 中，將 line-height 和 height 設定為與 200px 相同的值，選擇 div。像我們在第一種方法中所做的那樣，為 div 設定一個邊框並使文字居中對齊。然後，選擇 span 並將 display 屬性設定為 inline-block。然後，將 middle 的值賦予 vertical-align 屬性。最後，將 line-height 的值設定為 normal。

在下面的示例中，我們將 span 中的 line-height 屬性更改為 normal，以使多行文字具有正常的 line-height。inline-block 值將在上一行的正下方開始文字的下一行。vertical-align 屬性的 middle 值會將文字放置在垂直軸的中間。

示例程式碼：

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

模擬表格顯示使 CSS 中的文字垂直居中

我們可以將文字模擬為表格單元格，使其在 CSS 中垂直居中。我們使用 display 屬性來模擬表格。我們還將使用 vertical-align 屬性使文字垂直居中。我們將處理第二種方法的 HTML 片段，並對其應用新的 CSS。

首先，選擇 div 並設定高度、寬度和邊框。使用 display 屬性並將值設定為 table。它會使 div 表現得像一張表。然後，選擇 span 並將 display 屬性設定為 table-cell，將 vertical-align 屬性設定為 middle。將 span 元素設定為 table-cell 將使該元素類似於表格單元格。這樣，我們就可以建立一個垂直居中的文字。

示例程式碼：

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}