CSS 設(shè)置文本上下居中 在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要讓文本在其包含元素中垂直居中，這時(shí)候CSS就派上用場(chǎng)了。在下面的例子中，我們將使用CSS的一些屬性來設(shè)置文本的上下居中。 HTML 代碼 ```

這是一段樣式文本。

``` CSS 代碼 ``` .center { display: flex; /* 將p元素轉(zhuǎn)化為彈性容器 */ align-items: center; /* 定義彈性容器的縱向?qū)R方式 */ justify-content: center; /* 定義彈性容器的橫向?qū)R方式 */ height: 200px; /* 自定義p元素的高度 */ } ``` 在這個(gè)例子中，我們使用了CSS的flexbox布局來實(shí)現(xiàn)文本的上下居中。具體地說，我們把p元素轉(zhuǎn)化為一個(gè)彈性容器，并使用align-items屬性和justify-content屬性來定義其縱向和橫向?qū)R方式。 我們還給p元素自定義了一個(gè)高度，這是因?yàn)樵跊]有指定高度的情況下，彈性容器的高度會(huì)自動(dòng)適應(yīng)其內(nèi)容高度，從而讓文本無法垂直居中。 最終的效果是，這段文本會(huì)在其包含元素（比如一個(gè)div）中垂直居中。 總結(jié) 使用CSS來設(shè)置文本的上下居中是很簡(jiǎn)單的，我們只需要通過一些屬性來定義彈性容器的對(duì)齊方式就可以了。如果你需要在網(wǎng)頁(yè)設(shè)計(jì)中實(shí)現(xiàn)一個(gè)類似的效果，可以嘗試使用這個(gè)例子中的CSS代碼。