水平垂直居中的实现方式有哪些

在CSS中实现水平垂直居中有多种方法，以下是常用的实现方式：

1. Flexbox 布局（最推荐）

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

/* 也可以简写为 */
.container {
  display: flex;
  place-items: center;      /* 同时设置水平和垂直居中 */
}

2. Grid 布局

.container {
  display: grid;
  place-items: center;      /* 简写方式 */
}

/* 或分开写 */
.container {
  display: grid;
  justify-content: center;  /* 水平居中 */
  align-content: center;    /* 垂直居中 */
}

3. 绝对定位 + Transform（元素宽高未知）

.container {
  position: relative;
}

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

4. 绝对定位 + Margin（元素宽高已知）

.container {
  position: relative;
}

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

5. Table-Cell 布局

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

.child {
  display: inline-block;   /* 或 inline-block */
}

6. Line-Height 方法（单行文本）

.container {
  height: 100px;
  line-height: 100px;      /* 等于容器高度 */
  text-align: center;
}

7. CSS Grid + place-content

.container {
  display: grid;
  place-content: center;   /* 同时设置水平和垂直居中 */
}

8. 绝对定位 + Margin: auto

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;  /* 需要指定宽度 */
  height: 100px; /* 需要指定高度 */
}

9. Flexbox + Margin: auto

.container {
  display: flex;
}

.child {
  margin: auto;
}

各方法特点对比

方法	优点	缺点	适用场景
Flexbox	简单灵活，现代浏览器支持好	兼容性要求IE10+	现代布局，推荐使用
Grid	简洁，功能强大	兼容性要求较高	现代网格布局
绝对定位+Transform	元素宽高未知时可用	可能影响性能	弹窗、居中元素
Table-Cell	兼容性好	语义化差，需要额外元素	兼容旧浏览器

选择建议

1. 现代项目首选 Flexbox - 代码简洁，布局灵活
2. 需要网格布局时用 Grid - 二维布局更强大
3. 兼容旧浏览器考虑绝对定位 - 兼容性更好
4. 单行文本用 line-height - 简单直接
5. 未知宽高元素用 transform - 自适应性好

最推荐的现代方案是 Flexbox，因为它简单、灵活且得到了广泛支持。