当前位置：首页 > news >正文

【面试题】在 CSS 中，实现一个 div 中的子 div 水平垂直居中

news 来源：原创 2025/6/9 2:40:49

1. 使用 Flexbox

特点：简单、直观，现代浏览器支持良好。
代码：

css

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 200px;           /* 父容器需有高度 */
}
.child {
  /* 子元素样式随意 */
}

html

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

优点：

实现简单，代码少。
动态适应子元素大小。缺点：
兼容性稍差（IE9 及以下不支持）。

2. 使用 Grid

特点：类似 Flexbox，但更强大，适合复杂布局。
代码：

css

.parent {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
  height: 200px;
}
.child {
  /* 子元素样式随意 */
}

html

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

优点：

语法简洁，功能强大。
支持二维布局。缺点：
兼容性较 Flexbox 更差（IE11 需要前缀）。

3. 使用 position absolute 和 transform

特点：传统方法，兼容性好。
代码：

css

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

html

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

优点：

兼容性极佳（支持老旧浏览器）。
不依赖父元素具体宽高。缺点：
需要知道子元素宽高变化时调整 transform。
代码稍复杂。

4. 使用 position absolute 和 margin auto

特点：需要固定子元素宽高。
代码：

css

.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px; /* 子元素需固定宽高 */
  height: 50px;
}

html

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

优点：

兼容性好。
不需要额外的计算。缺点：
子元素必须有明确的宽高。
不够灵活。

5. 使用 position absolute 和计算偏移

特点：手动计算偏移量，适合固定尺寸场景。
代码：

css

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

html

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

优点：

兼容性极好。
直观易懂。缺点：
需要手动计算宽高偏移。
子元素尺寸变化时需调整。

6. 使用 table-cell

特点：利用表格特性，较老式方法。
代码：

css

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 200px; /* 需要宽度 */
}
.child {
  display: inline-block;
}

html

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

优点：

兼容性好（支持老浏览器）。缺点：
需要额外调整子元素为 inline-block。
不够现代化，维护性差。

7. 使用 line-height（单行文本居中）

特点：适合单行文本或简单内容。
代码：

css

.parent {
  height: 200px;
  line-height: 200px; /* 与高度一致 */
  text-align: center;
}
.child {
  display: inline-block;
  line-height: normal; /* 重置子元素行高 */
}

html

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

优点：

简单，适合文本居中。缺点：
只适用于单行内容，多行或复杂内容不适用。

总结对比

方法	优点	缺点	兼容性
Flexbox	简单、灵活	IE9+	较好
Grid	简洁、强大	IE11+（需前缀）	一般
position + transform	兼容性好、动态适应	代码稍复杂	极好
position + margin	兼容性好	需固定宽高	极好
position + 计算	直观、兼容性好	需手动计算	极好
table-cell	兼容老浏览器	不够现代	极好
line-height	简单（单行）	仅限单行内容	极好