css居中对齐方式总结

一、文本对齐（单行文字）

1.水平居中对齐

设置属性：

text-align: center;

2.垂直居中对齐

对于单行文字，让 height = line-height 即可（行高等于父元素高度）

二、定位（块级元素或行内块元素）

1.水平居中对齐

parent类代表父元素，child代表子元素

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

2.垂直居中对齐

.parent {
  position: relative;
}

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

3.居中对齐

.parent {
  position: relative;
}

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

三、flex布局（块级元素或行内块元素）

1.水平居中对齐

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
}

2.垂直居中对齐

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

3.居中对齐

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