【前端每天一题】 第 15 题：CSS 水平垂直居中高频方案（Flex / Grid / transform 等）

下面是 下一道高频前端面试题（详细版 + 速记卡片）

第 15 题：CSS 水平垂直居中高频方案（Flex / Grid / transform 等）

这道题是前端面试几乎必问的 CSS 基础题，高频大厂必考。

---

✅ 第 15 题：如何实现水平垂直居中？

---

📘 一、方案 1：Flex 布局（最推荐）

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 200px;           /* 父元素需要有高度 */
}

<div class="parent">
  <div class="child">内容</div>
</div>

✅ 特点：

• 简单、兼容性好（IE10+）
• 可同时处理水平 + 垂直
• 适合响应式布局

---

📘 二、方案 2：绝对定位 + transform

.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

✅ 特点：

• 父元素必须有定位（relative / absolute / fixed）
• 对老浏览器兼容良好
• 对动态内容适用
• 可以实现固定尺寸或自适应元素居中

---

📘 三、方案 3：CSS Grid

.parent {
  display: grid;
  place-items: center; /* 同时水平+垂直居中 */
  height: 200px;
}

✅ 特点：

• Grid 布局，语义清晰
• 简洁、一行代码搞定居中
• IE11 不完全支持 place-items

---

📘 四、方案 4：行内块 + line-height（仅单行文本）

.parent {
  height: 50px;
  line-height: 50px; /* = 高度 */
  text-align: center;
}

✅ 只适合单行文本，不适合多行内容或块元素

---

📘 五、方案 5：table-cell（老方法）

.parent {
  display: table;
  width: 200px;
  height: 200px;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

✅ 特点：

• IE8+ 支持
• 老项目可能遇到
• 不推荐现代项目

---

📘 六、速记卡片（面试背诵版）

🎯 高频方案（现代项目）：
1️⃣ Flex：display:flex; justify-content:center; align-items:center
2️⃣ Grid：display:grid; place-items:center
3️⃣ 绝对定位 + transform：top:50%; left:50%; transform:translate(-50%,-50%)

📌 旧方案（兼容 IE8/9）：
- line-height（单行文本）
- table-cell

---

下一题推荐：
第 16 题：数组去重高频方法 + Set / filter / reduce / Object 键值法

是否继续出第 16 题？