父div无固定高度时，如何在多视口下垂直居中div-4？

1. Flexbox 布局（最推荐） #

这是现代CSS布局的首选方案，无需父元素固定高度，父容器高度会自动由内容撑开。只需给父容器设置display: flex，再添加align-items: center就能实现子元素垂直居中，搭配justify-content: center还能同时实现水平居中。

示例代码：

<div class="parent">
  <div class="child">我是垂直居中的子元素</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：实现水平居中 */
  padding: 20px; /* 模拟父元素内容高度 */
  border: 1px solid #ccc;
}

.child {
  background: #f0f0f0;
  padding: 10px;
}

2. Grid 布局 #

和Flexbox一样简洁，父容器设置display: grid后，通过align-items: center实现垂直居中，place-items: center可同时完成水平+垂直居中。

示例代码：

.parent {
  display: grid;
  align-items: center;
  /* 可选：place-items: center; 替代上面一行 + justify-items: center */
  padding: 30px;
  border: 1px solid #ccc;
}

3. Table 布局（兼容旧浏览器） #

如果需要兼容IE8及以下版本，可以用Table布局模拟单元格垂直对齐效果。

示例代码：

.parent {
  display: table-cell;
  vertical-align: middle;
  width: 300px; /* 需设置宽度，否则会自适应内容 */
  padding: 20px;
  border: 1px solid #ccc;
}

.child {
  display: inline-block; /* 让子元素宽度自适应 */
  background: #f0f0f0;
}

4. 伪元素法 #

通过给父元素添加伪元素，利用vertical-align: middle特性让子元素居中，适合无法使用Flex/Grid的场景。

示例代码：

.parent {
  position: relative;
  padding: 20px;
  border: 1px solid #ccc;
}

.parent::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* 消除内联元素空格影响 */
}

.child {
  display: inline-block;
  vertical-align: middle;
  background: #f0f0f0;
}

上面的Flexbox/Grid方案本身天然适配所有视口（移动端、桌面端、iPad），如果需要针对特定视口做细节调整，可结合媒体查询实现。

基础全视口实现 #

直接用Flexbox给div-4的父容器设置布局，无论视口大小都能保持垂直居中：

<div class="container">
  <div id="div-4">我是div-4，在所有视口下垂直居中</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 让容器占满当前视口高度，适合全屏居中场景 */
  padding: 10px;
}

#div-4 {
  background: #4CAF50;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

特定视口微调（以iPad为例） #

如果需要在iPad的特定尺寸下调整div-4的样式或位置，可添加媒体查询：

/* iPad 竖屏（768px <= 宽度 < 1024px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #div-4 {
    padding: 30px; /* 调整内边距 */
  }
}

/* iPad 横屏（宽度 >= 1024px） */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .container {
    padding: 20px; /* 调整容器内边距 */
  }
}

/* 移动端（宽度 < 768px） */
@media screen and (max-width: 767px) {
  #div-4 {
    width: 90%; /* 让div-4占满大部分宽度 */
  }
}

关键点说明 #

• Flexbox/Grid是当前最优方案，代码简洁且兼容性好（支持IE10+及所有现代浏览器）。
• min-height: 100vh用于让父容器占满视口高度，适合全屏居中场景；如果父容器是内容高度自适应，去掉该属性即可。
• 媒体查询的尺寸可根据实际设备需求灵活调整。

内容的提问来源于stack exchange，提问作者Rue Vitale