本文目錄導讀：

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

CSS布局技巧：實現元素居中

在網頁設計中，將元素置于頁面中間是一個常見的需求，通過CSS，我們可以輕松地完成這個任務，本文將介紹幾種常用的方法，幫助你實現元素的居中。

水平居中

1、使用margin實現水平居中

通過設置元素的左右外邊距為自動，可以使元素在水平方向上居中。

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

2、使用text-align實現文本內容的水平居中

對于文本內容，可以通過設置父元素的text-align屬性為center來實現水平居中。

.parent {
  text-align: center;
}

垂直居中

1、使用flexbox實現垂直居中

Flexbox布局可以輕松實現元素的垂直居中，通過設置父元素的display屬性為flex，并使用justify-content和align-items屬性，可以分別實現水平和垂直方向的居中。

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

2、使用定位實現垂直居中

通過***定位，也可以實現元素的垂直居中，設置父元素的高度和相對定位；設置子元素的top和bottom屬性為50%，并通過transform屬性調整位置。

.parent {
  position: relative; /* 相對定位 */
  height: 100%; /* 高度設置 */
}
.child {
  position: absolute; /* ***定位 */
  top: 50%; /* 距離頂部距離 */
  transform: translateY(-50%); /* 調整位置 */
}

就是幾種常見的將元素居中的方法，在實際應用中，可以根據具體需求選擇合適的方法，希望本文對你有所幫助，如果你還有其他問題，歡迎隨時提問。