本文目錄導讀：

1. 水平居中
2. 垂直居中
3. 應用示例

CSS 居中代碼詳解

CSS 居中代碼是網(wǎng)頁設計中常用的一種技巧，可以實現(xiàn)將元素水平或垂直居中，下面我們將詳細介紹如何使用 CSS 居中代碼，以及在不同場景下如何應用。

水平居中

在 CSS 中，實現(xiàn)水平居中常用的方法是使用margin: auto，這種方法適用于塊級元素，如<div>、<p> 等，具體實現(xiàn)步驟如下：

1、設置元素的寬度（width）；

2、設置元素的左右外邊距（margin-left 和margin-right）為自動（auto）；

3、元素將水平居中。

垂直居中

實現(xiàn)垂直居中相對復雜一些，因為塊級元素在垂直方向上默認是居中的，我們可以通過設置元素的高度（height）和行高（line-height）來實現(xiàn)垂直居中，具體步驟如下：

1、設置元素的高度（height）；

2、設置元素的行高（line-height）等于元素的高度；

3、元素將垂直居中。

應用示例

下面是一個簡單的示例，展示如何使用 CSS 居中代碼：

HTML 代碼：

<div class="center-div">我是居中的內容</div>

CSS 代碼：

.center-div {
  width: 200px; /* 設置元素的寬度 */
  margin: auto; /* 設置元素的左右外邊距為自動 */
  height: 100px; /* 設置元素的高度 */
  line-height: 100px; /* 設置元素的行高等于元素的高度 */
}

在這個示例中，我們創(chuàng)建了一個名為center-div 的類，用于將元素水平和垂直居中，通過width 和height 屬性設置元素的尺寸，再通過margin: auto 和line-height: 100px 實現(xiàn)水平和垂直居中。