CSS 兩行文字居中對齊

隨著 Web 開發的不斷普及，越來越多的網站需要對文字進行排版和布局。其中，居中對齊是常見的排版技巧之一。在 CSS 中，我們可以通過設置文本的垂直居中位置來實現兩行文字的居中對齊。

首先，我們需要在 HTML 中添加一個包含兩行文本的段落元素。例如：

<p>第一行文本內容</p>

<p>第二行文本內容</p>

然后，我們可以使用 CSS 來實現兩行文本的居中對齊。下面是一個簡單的示例代碼：

display: flex;

align-items: center;

上述代碼中，`display: flex` 屬性將 `p` 元素轉換為一個 Flexbox 元素，`align-items: center` 屬性則將 Flexbox 元素中的子元素垂直居中。

除了使用 Flexbox 外，我們還可以使用其他 CSS 布局技術來實現兩行文本的居中對齊，例如 `position: relative` 屬性和 `position: absolute` 屬性。下面是一個使用這兩種技術實現居中對齊的示例代碼：

.parent {

position: relative;

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

上述代碼中，`.parent` 元素設置了一個父容器，`.child` 元素設置了一個子元素，并將其定位在父元素中心位置。然后，`top` 和 `left` 屬性分別設置了子元素相對于父元素垂直和水平居中的位置。

需要注意的是，居中對齊只適用于水平居中的情況。如果要將兩行文本垂直居中，可以使用 `transform: rotateY(45deg)` 屬性來實現。

通過使用 CSS 居中對齊技術，我們可以輕松地將兩行文字實現居中對齊，使它們在網頁中更加整齊和易讀。