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

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

CSS5.5 居中技巧

在CSS5.5中，我們可以使用多種方法來將元素居中，以下是幾種常見的居中技巧：

文本居中

在CSS5.5中，我們可以使用text-align屬性來將文本居中。

p {
  text-align: center;
}

上述代碼將段落元素p中的文本居中對(duì)齊。

水平居中

對(duì)于塊級(jí)元素，我們可以使用margin屬性來實(shí)現(xiàn)水平居中。

div {
  margin-left: auto;
  margin-right: auto;
}

上述代碼將div元素水平居中對(duì)齊，需要注意的是，這種方法要求div元素的寬度必須被定義。

垂直居中

在CSS5.5中，垂直居中稍微復(fù)雜一些，我們可以通過設(shè)置元素的line-height來垂直居中單行文本。

span {
  line-height: 30px; /* 假設(shè)元素高度為30px */
}

上述代碼將span元素中的文本垂直居中對(duì)齊，對(duì)于塊級(jí)元素，我們可以使用flexbox或grid布局來實(shí)現(xiàn)垂直居中。

div {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

上述代碼將div元素及其子元素同時(shí)垂直和水平居中對(duì)齊。

通過以上方法，我們可以輕松實(shí)現(xiàn)CSS5.5中的元素居中效果。