CSS居中

目录

一、水平居中方案

1. 行内/行内块元素

2. 块级元素（固定宽度）

3. Flex 布局

4. Grid 布局

二、垂直居中方案

1. 单行文本/行内元素

2. 表格单元格特性

3. Flex 布局

4. Grid 布局

5. 绝对定位（已知高度）

三、水平垂直同时居中

1. Flex 布局（推荐）

2. Grid 布局（推荐）

3. 绝对定位 + Transform（未知尺寸）

4. 绝对定位 + Margin（已知尺寸）

5. 表格布局

四、方案对比与选型建议

五、最佳实践

---

以下是 CSS 中实现水平居中、垂直居中以及同时水平垂直居中的 全场景方案，涵盖现代布局方案（Flex/Grid）和传统布局方案（定位/行高），按应用场景分类整理：

---

一、水平居中方案

1. 行内/行内块元素

.parent {
  text-align: center; /* 父容器设置 */
}
.child {
  display: inline-block; /* 子元素设为行内块 */
}

2. 块级元素（固定宽度）

.child {
  width: 300px;        /* 必须指定宽度 */
  margin: 0 auto;      /* 左右外边距自动 */
}

3. Flex 布局

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

4. Grid 布局

.parent {
  display: grid;
  justify-content: center; /* 主轴对齐 */
}

---

二、垂直居中方案

1. 单行文本/行内元素

.parent {
  height: 200px;      /* 需要固定高度 */
  line-height: 200px; /* 行高等于容器高度 */
}

2. 表格单元格特性

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

3. Flex 布局

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

4. Grid 布局

.parent {
  display: grid;
  align-items: center; /* 交叉轴对齐 */
}

5. 绝对定位（已知高度）

.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 向上偏移自身高度50% */
}

---

三、水平垂直同时居中

1. Flex 布局（推荐）

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

2. Grid 布局（推荐）

.parent {
  display: grid;
  place-items: center; /* 合并写法 */
}

3. 绝对定位 + Transform（未知尺寸）

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

4. 绝对定位 + Margin（已知尺寸）

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin: -50px 0 0 -100px; /* 负边距为宽高一半 */
}

5. 表格布局

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  display: inline-block;
}

---

四、方案对比与选型建议

方法	优点	缺点	适用场景
Flex 布局	代码简洁，响应式友好	需要父容器支持	现代浏览器常规布局
Grid 布局	二维布局控制能力强	兼容性略低于 Flex	复杂布局场景
绝对定位 + Transform	不依赖元素尺寸	可能影响性能	弹窗/浮层定位
表格布局	兼容性极佳	语义化差	老旧项目兼容方案
Margin Auto	简单快速	必须指定宽高	块级元素简单居中

---

五、最佳实践

1. 现代项目首选：优先使用 Flex/Grid 布局

   /* Flex 终极方案 */
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh; /* 确保容器有高度 */
   }

2. 传统项目兼容：绝对定位 + Transform

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

3. 文本内容居中：结合行高与文本对齐

   .hero-section {
     text-align: center;
     line-height: 600px; /* 视设计稿高度而定 */
   }

---