元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

问题解析

元素居中是 CSS 布局中最常见也是最容易出错的问题。面试中考察这个问题，不仅是考察技术掌握度，更是考察候选人对 CSS 布局原理的理解深度。

方案对比

1. Flexbox 布局（最推荐）

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

.child {
  /* 子元素无需设置宽高 */
}

优点：

代码简洁，无需计算
支持不定宽高元素
现代浏览器完美支持

适用场景：现代项目首选方案

2. Grid 布局

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

/* 或者 */
.parent {
  display: grid;
  justify-content: center;
  align-content: center;
}

优点：更简洁，适合二维布局场景

3. 定位 + transform（兼容性好）

.parent {
  position: relative;
}

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

原理：

top: 50%; left: 50% - 将子元素的左上角定位到父元素中心
transform: translate(-50%, -50%) - 将子元素自身向左上方偏移 50%，实现中心对齐

优点：

支持不定宽高
兼容性较好（IE9+）

4. 定位 + margin: auto

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

限制：子元素必须设置宽高，否则会被拉伸填满父元素

5. 定位 + 负 margin（传统方案）

.parent {
  position: relative;
}

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

缺点：需要知道子元素具体宽高

6. Table-cell 布局

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

.child {
  display: inline-block;
}

缺点：会改变元素的 display 类型，可能引发副作用

不定宽高居中方案总结

方案	代码复杂度	兼容性	推荐度
Flexbox	⭐	现代浏览器	⭐⭐⭐⭐⭐
Grid	⭐	现代浏览器	⭐⭐⭐⭐
定位 + transform	⭐⭐	IE9+	⭐⭐⭐⭐
定位 + margin: auto	⭐⭐	需定宽高	⭐⭐

深入理解

为什么 `transform: translate` 能居中

translate 的百分比是相对于自身尺寸计算的，这使得它在不知道具体尺寸时也能完美居中：

/* 无论子元素多大，都能居中 */
.child {
  transform: translate(-50%, -50%);
  /* 向左移动自身宽度的 50%，向上移动自身高度的 50% */
}

margin: auto 的居中原理

当元素设置了 position: absolute 且 left/right/top/bottom 同时为 0 时，元素的 margin box 会被拉伸填满包含块。此时设置 margin: auto 会将多余空间平均分配到四周，实现居中。

Flexbox 居中的细节

.parent {
  display: flex;
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 交叉轴对齐 */
}

注意：这两个属性的效果取决于 flex-direction：

flex-direction: row（默认）：justify-content 控制水平，align-items 控制垂直
flex-direction: column：justify-content 控制垂直，align-items 控制水平

特殊场景

单行文本居中

.text-center {
  text-align: center;
  line-height: 100px; /* 与容器高度相同 */
}

多行文本垂直居中

.multi-line {
  display: flex;
  align-items: center;
  /* 或 */
  display: table-cell;
  vertical-align: middle;
}

视口居中（固定定位）

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

最佳实践

/* 现代项目推荐：Flexbox */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 需要兼容性时：定位 + transform */
.center-transform {
  position: relative;
}
.center-transform > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Grid 方案 */
.center-grid {
  display: grid;
  place-items: center;
}

面试要点

能够说出至少 3 种居中方案
能够区分定宽高和不定宽高的方案差异
能够解释 transform: translate(-50%, -50%) 的原理
了解各方案的兼容性和适用场景
知道 Flexbox 是目前最推荐的方案