如何在父div中水平垂直居中多子div（禁用Flexbox）

嘿，很高兴能帮你搞定这个问题！你已经用text-align: center实现了水平居中，又不想用Flexbox（担心新增元素被压缩），那下面这几个方案都能完美满足你的需求，而且不会影响后续新增元素的尺寸：

方案一：Table-Cell布局（最简单，兼容大多数浏览器） #

这个方案只需要给.hero添加两行CSS就能实现垂直居中，完全复用你现有的代码结构：

.hero {
  width: 100vw;
  height: 100vh;
  text-align: center;
  /* 新增以下两行 */
  display: table-cell;
  vertical-align: middle;
} 
.box {
  width: 250px;
  height: 350px;
  background: red;
  margin: 50px;
  display: inline-block;
}

原理是display: table-cell会让.hero表现得像表格单元格，而vertical-align: middle会让所有inline/inline-block子元素自动垂直居中。后续新增.box元素时，它们会自动换行，并且保持原有宽高，不会被压缩。

方案二：CSS Grid布局（现代方案，更灵活） #

如果你更倾向于现代CSS布局，可以用Grid实现，它同样不会压缩新增元素，还能更灵活地控制间距：

.hero {
  width: 100vw;
  height: 100vh;
  /* 用Grid替代text-align */
  display: grid;
  place-content: center;
  /* 自动适配列数，保持.box的最小宽度 */
  grid-template-columns: repeat(auto-fit, minmax(250px, auto));
  /* 用gap控制元素间距，比margin更干净 */
  gap: 100px;
} 
.box {
  width: 250px;
  height: 350px;
  background: red;
  /* 可以去掉margin，用gap代替 */
}

这个方案中，新增的.box会自动在一行放不下时换行，每个元素都保持250px的宽度，不会被压缩。

方案三：绝对定位+Transform（兼容旧浏览器，比如IE11） #

如果需要兼容较老的浏览器，这个方案也能生效：

.hero {
  width: 100vw;
  height: 100vh;
  text-align: center;
  /* 新增相对定位 */
  position: relative;
} 
.box {
  width: 250px;
  height: 350px;
  background: red;
  margin: 50px;
  display: inline-block;
  /* 新增垂直居中样式 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

原理是通过top: 50%把元素顶部移到容器垂直中点，再用transform: translateY(-50%)把元素向上偏移自身高度的一半，从而实现垂直居中。

补充说明：为什么Flexbox会压缩元素？ #

其实Flexbox也可以避免压缩，只需要给.box添加flex-shrink: 0（禁止元素缩小），但既然你明确不想用Flexbox，上面的方案就更适合你啦~

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