本文目錄導讀：

1. 塊級元素的水平垂直居中對齊
2. 利用Flexbox布局居中對齊

CSS布局中的元素居中對齊技巧

在CSS中，實現(xiàn)文本內(nèi)容的水平居中對齊是常見的需求，我們可以通過設置文本元素的text-align屬性為center來實現(xiàn)。

.center-text {
  text-align: center;
}

這將使得所有帶有.center-text類的元素中的文本內(nèi)容水平居中對齊。

塊級元素的水平垂直居中對齊

對于塊級元素（如<div>），要實現(xiàn)水平和垂直方向上的居中對齊，需要利用CSS的定位和布局技巧，以下是一種常見的方法：

1、為父元素設置position: relative;，這樣可以通過偏移量來定位子元素。

2、為子元素設置position: absolute;，并設置left: 50%;和top: 50%;，使子元素的左上角位于父元素的中心位置。

3、使用transform: translate(-50%, -50%);將子元素自身中心移動到其父元素的中心位置。

.center-block {
  position: relative;
}
.centered-child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

這樣，帶有.centered-child類的元素將在其父元素中水平和垂直方向上居中對齊。

利用Flexbox布局居中對齊

Flexbox布局是CSS3的一個強大布局工具，可以輕松實現(xiàn)元素的居中對齊，只需為父元素設置display: flex;，并添加justify-content: center;和align-items: center;即可。

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

這將使得所有子元素在父元素中水平和垂直方向上居中對齊，F(xiàn)lexbox布局適用于現(xiàn)代瀏覽器，且易于理解和使用。