本文目錄導讀：

1. 水平居中
2. 垂直居中
3. 居中顯示圖片

CSS字居中排版技巧

在網(wǎng)頁設計中，文本居中是常見的排版需求，使用CSS（層疊樣式表）可以實現(xiàn)文本的居中顯示，下面是一些CSS字居中的排版技巧。

水平居中

在CSS中，可以使用text-align屬性來實現(xiàn)文本的水平居中。

div {
  text-align: center;
}

上述代碼會將div元素中的文本水平居中顯示。

垂直居中

垂直居中相對復雜一些，因為CSS中沒有直接的屬性來實現(xiàn)垂直居中，可以通過一些技巧來實現(xiàn)，可以使用line-height屬性來設置文本的行高，然后將height屬性設置為與line-height相同，從而實現(xiàn)垂直居中。

div {
  height: 50px;
  line-height: 50px;
}

上述代碼會將div元素中的文本垂直居中顯示。

居中顯示圖片

除了文本居中，CSS還可以實現(xiàn)圖片的居中顯示，可以使用margin屬性來設置圖片的外邊距，從而實現(xiàn)圖片的居中顯示。

img {
  margin: 0 auto;
}

上述代碼會將圖片水平居中顯示。

通過以上技巧，可以實現(xiàn)CSS字居中的排版需求，在實際應用中，可以根據(jù)具體需求選擇適合的排版方式。