本文目錄導讀：

1. 文本水平居中
2. 文本垂直居中

CSS文本居中顯示技巧詳解

文本水平居中

在CSS中，實現(xiàn)文本的水平居中顯示有多種方法，以下是兩種常見的方法：

1、使用text-align屬性

對于塊級元素（如<div>），我們可以使用CSS的text-align屬性來實現(xiàn)文本的水平居中。

div {
  text-align: center;
}

這將使<div>元素內的文本水平居中。

2、使用margin屬性實現(xiàn)左右對稱居中

對于行內元素（如<span>），我們可以使用margin屬性來實現(xiàn)左右對稱的居中效果。

span {
  display: block; /* 將行內元素轉換為塊級元素 */
  margin-left: auto; /* 左側空白自動填充 */
  margin-right: auto; /* 右側空白自動填充 */
}

文本垂直居中

文本的垂直居中相對復雜一些，以下是一些常見的方法：

1、使用flexbox布局

通過CSS的flexbox布局，可以輕松實現(xiàn)文本的垂直居中。

div {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 子元素垂直居中 */
  justify-content: center; /* 子元素水平居中 */
}

2、使用CSS Grid布局

CSS Grid布局同樣可以實現(xiàn)文本的垂直居中。

div {
  display: grid; /* 使用grid布局 */
  place-items: center; /* 文本水平和垂直居中 */
}

在實際應用中，需要根據(jù)具體情況選擇適合的居中方法，要注意不同瀏覽器的兼容性問題，以確保在各種瀏覽器中都能實現(xiàn)良好的居中效果，還需要注意HTML元素的類型（塊級元素或行內元素），以便選擇正確的CSS屬性來實現(xiàn)居中效果。