上下左右居中对齐

在CSS中实现元素的上下左右居中对齐是常见需求，针对不同场景有多种实现方案。以下是最常用的几种方法及其适用场景：

一、水平居中

1. 行内元素/文本

.parent {
  text-align: center; /* 对行内元素有效 */
}

2. 块级元素

.child {
  width: 200px;
  margin: 0 auto; /* 对块级元素有效 */
}

3. 绝对定位 + 负边距

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  width: 200px;
  margin-left: -100px; /* 负边距为宽度的一半 */
}

4. 绝对定位 + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 无需知道宽度 */
}

5. Flexbox

.parent {
  display: flex;
  justify-content: center; /* 主轴居中 */
}

6. Grid

.parent {
  display: grid;
  justify-items: center; /* 水平居中 */
}

二、垂直居中

1. 单行文本

.parent {
  height: 100px;
  line-height: 100px; /* 行高等于容器高度 */
}

2. 绝对定位 + 负边距

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 负边距为高度的一半 */
}

3. 绝对定位 + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 无需知道高度 */
}

4. Flexbox

.parent {
  display: flex;
  align-items: center; /* 交叉轴居中 */
}

5. Grid

.parent {
  display: grid;
  align-items: center; /* 垂直居中 */
}

三、水平 + 垂直居中（完全居中）

1. 绝对定位 + 负边距（已知宽高）

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;  /* 高度的一半 */
  margin-left: -100px; /* 宽度的一半 */
}

2. 绝对定位 + transform（未知宽高）

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 同时处理水平和垂直 */
}

3. Flexbox（现代方案）

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

4. Grid（现代方案）

.parent {
  display: grid;
  place-items: center; /* 同时处理水平和垂直 */
}

5. Grid + margin auto（更简洁）

.parent {
  display: grid;
}
.child {
  margin: auto; /* 利用Grid的特性实现完全居中 */
}

6. table-cell方案（兼容性好）

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center;     /* 水平居中 */
}
.child {
  display: inline-block;
}

四、特殊场景

1. 绝对定位元素占满父容器并居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 四个方向均为0时，margin:auto会使元素居中 */
  width: 200px; /* 必须指定宽高 */
  height: 100px;
}

2. 使用flex实现多个元素均匀分布并居中

.parent {
  display: flex;
  justify-content: space-around; /* 元素周围均匀分布间距 */
  align-items: center;
}

3. 图片居中（避免底部间隙）

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: block; /* 避免底部间隙 */
}

五、兼容性说明

方案	兼容性	推荐场景
Flexbox	IE10+，现代浏览器	现代项目，简单布局
Grid	IE11+（部分支持），现代浏览器	复杂网格布局，居中需求
绝对定位 + transform	IE9+	已知或未知宽高的元素
table-cell	全兼容	需要兼容旧浏览器的场景

六、总结

• 优先使用Flexbox/Grid：代码简洁，性能最优。
• 绝对定位 + transform：适合未知宽高的元素，兼容性好。
• table-cell：兼容性最强，但语义不直观。

根据项目需求和浏览器兼容性选择合适的方案，灵活组合使用可以应对各种复杂场景。