【纯干货分享】CSS3 中的居中对齐技巧

在前端开发中，实现元素的居中对齐是一个常见的需求。CSS3 提供了多种灵活的技巧，可以实现水平和垂直方向的居中对齐。

1. 水平居中对齐

1.1 text-align: center;

对于行内元素，可以通过设置父元素的 text-align 属性为 center 来实现水平居中对齐。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

1.2 margin: auto;

对于块级元素，可以使用 margin: auto; 来实现水平居中对齐。这需要父元素设置宽度，并且子元素需要是块级元素。

.parent {
  width: 50%;
  margin: auto;
}

.child {
  display: block;
}

1.3 flexbox

使用 Flexbox 布局可以更轻松地实现水平居中对齐。

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* 没有特殊要求 */
}

2. 垂直居中对齐

2.1 line-height

对于单行文本，可以使用 line-height 属性实现垂直居中对齐。

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  display: inline-block;
}

2.2 flexbox

Flexbox 布局同样适用于垂直居中对齐。

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

.child {
  /* 没有特殊要求 */
}

2.3 position 和 transform

使用 position: absolute; 和 transform 属性可以实现相对于父元素的垂直居中对齐。

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3. 水平和垂直居中对齐

3.1 flexbox

结合使用 Flexbox 布局可以轻松实现水平和垂直方向的居中对齐。

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

.child {
  /* 没有特殊要求 */
}

3.2 position 和 transform

同样，使用 position 和 transform 属性可以实现水平和垂直方向的居中对齐。

.parent {
  position: relative;
  height: 200px;
}

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