本文目錄導(dǎo)讀：

1. 水平居中
2. 垂直居中
3. 多行文本居中

CSS技巧：文本居中的藝術(shù)

在網(wǎng)頁設(shè)計(jì)中，文本居中顯示是一種常見且重要的布局技巧，通過CSS（層疊樣式表），我們可以輕松實(shí)現(xiàn)文本的居中顯示，提升網(wǎng)頁的視覺效果和用戶體驗(yàn)，本文將介紹幾種常見的文本居中方法，幫助你更好地掌握這一技巧。

水平居中

水平居中是文本居中的基礎(chǔ)，在CSS中，我們可以使用text-align屬性來實(shí)現(xiàn)文本的水平和垂直居中，對(duì)于水平居中，只需將屬性值設(shè)置為center即可。

div {
  text-align: center;
}

這將使得div元素內(nèi)的文本水平居中顯示。

垂直居中

垂直居中對(duì)齊稍微復(fù)雜一些，因?yàn)镃SS并沒有直接提供垂直居中的屬性，不過，我們可以通過一些技巧來實(shí)現(xiàn)，一種常見的方法是使用flexbox布局，將父元素的display屬性設(shè)置為flex，然后使用align-items屬性實(shí)現(xiàn)垂直居中。

div {
  display: flex;
  align-items: center;
  justify-content: center; /* 同時(shí)實(shí)現(xiàn)水平和垂直居中 */
}

多行文本居中

對(duì)于多行文本，我們可以使用CSS的line-height屬性來實(shí)現(xiàn)垂直居中的效果，將元素的line-height設(shè)置為與高度相同，即可使多行文本在元素中垂直居中顯示。

div {
  height: 100px; /* 設(shè)置元素高度 */
  line-height: 100px; /* 設(shè)置行高與元素高度相同 */
  text-align: center; /* 水平居中 */
}

文本居中顯示是網(wǎng)頁設(shè)計(jì)中常見的布局技巧，通過CSS我們可以輕松實(shí)現(xiàn)文本的水平和垂直居中，在實(shí)際應(yīng)用中，可以根據(jù)需求選擇不同的方法來實(shí)現(xiàn)文本的居中顯示，提升網(wǎng)頁的視覺效果和用戶體驗(yàn)。