本文目錄導讀：

1. 水平居中
2. 垂直居中
3. 同時實現(xiàn)水平和垂直居中

CSS 居中定義詳解

CSS 居中定義有多種方法，包括水平居中、垂直居中、以及同時實現(xiàn)水平和垂直居中，下面將分別介紹這些方法。

水平居中

水平居中是***簡單的居中方式，可以通過設置元素的左右邊距為自動來實現(xiàn)，即使用 CSS 的 margin-left 和 margin-right 屬性，將其值設置為 auto。

div {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 寬度根據(jù)需要設置 */
}

垂直居中

垂直居中相對復雜一些，可以通過設置元素的上下邊距為自動來實現(xiàn)，即使用 CSS 的 margin-top 和 margin-bottom 屬性，將其值設置為 auto。

div {
  margin-top: auto;
  margin-bottom: auto;
  height: 50%; /* 高度根據(jù)需要設置 */
}

同時實現(xiàn)水平和垂直居中

同時實現(xiàn)水平和垂直居中可以通過設置元素的左右和上下邊距為自動來實現(xiàn)，即使用 CSS 的 margin-left、margin-right、margin-top 和 margin-bottom 屬性，將其值設置為 auto。

div {
  margin: auto; /* 四個方向都設置為自動 */
  width: 50%; /* 寬度根據(jù)需要設置 */
  height: 50%; /* 高度根據(jù)需要設置 */
}

需要注意的是，這種方法只在塊級元素中有效，對于行內(nèi)元素或內(nèi)聯(lián)元素可能無法正常工作，如果元素的寬度和高度都設置為自動，那么元素的大小將由瀏覽器窗口或父元素的大小來決定，這可能會導致元素的大小不可預測，在實際應用中，建議根據(jù)具體需求選擇適合的居中方法。