垂直居中问题咨询：relative容器内等宽高inline-block元素布局

嘿，我来帮你搞定这个垂直居中的问题！你已经把横向滚动和等宽高正方形的布局实现得差不多了，只差最后一步让这些元素在容器里垂直居中，下面给你几个靠谱的方案，都能完美适配你的现有布局：

方案一：Flexbox（最推荐，代码简洁兼容性好） #

Flexbox是现在处理布局最省心的方式，直接修改你的.parent样式就行，完全不用动子元素的代码：

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}
.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: auto; /* 用auto更友好，没内容时不显示滚动条 */
  /* 替换原来的text-align和white-space，用flex实现居中+不换行 */
  display: flex;
  align-items: center; /* 核心：垂直居中 */
  flex-wrap: nowrap; /* 强制不换行，保证横向滚动 */
  /* 如果你还想让元素之间有间距，可以加gap: 10px; */
}
.child {
  display: inline-block; /* 或者直接用block也可以，flex里不影响 */
  width: 120px; /* 你需要的正方形宽度 */
  height: 120px;
  background-color: #eee;
  /* 其他样式保持不变 */
}

原理很简单：display: flex把容器变成弹性布局，align-items: center直接让所有子元素在垂直方向上居中，flex-wrap: nowrap确保元素不会换行，超出容器宽度时自动触发横向滚动，完美契合你的需求。

方案二：line-height + vertical-align（兼容旧浏览器） #

如果需要兼容IE这类老浏览器，这个传统方法依然有效。利用容器的line-height和子元素的vertical-align来实现垂直居中：

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}
.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap; /* 保留这个，确保元素不换行 */
  line-height: 40vh; /* 这里的高度要和容器height一致，40%的视口高度 */
  text-align: center; /* 如果你还需要水平居中的话 */
}
.child {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #eee;
  vertical-align: middle; /* 核心：让元素对齐到行高的中间 */
  line-height: normal; /* 重置子元素的行高，避免内部文本受影响 */
  /* 其他样式保持不变 */
}

注意这里的line-height要和容器的height数值一致，因为你的容器height是40%（相对父元素.outer的100%高度，也就是视口高度），所以用40vh刚好匹配。如果容器是固定像素高度，比如200px，那line-height就设成200px就行。

方案三：Grid布局（另一种现代布局方式） #

Grid布局同样能轻松实现这个效果，代码也很简洁：

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}
.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: auto;
  display: grid;
  align-items: center; /* 垂直居中 */
  grid-auto-flow: column; /* 让子元素自动排成一列 */
  grid-auto-columns: 120px; /* 可以直接在这里定义子元素宽度，也可以在.child里设 */
  gap: 10px; /* 元素间距可选 */
}
.child {
  height: 120px;
  background-color: #eee;
  /* 如果不在grid-auto-columns里设宽度，就在这里加width: 120px; */
}

Grid的grid-auto-flow: column会让子元素自动横向排列，超出容器宽度时触发横向滚动，align-items: center负责垂直居中，也是非常直观的实现方式。

小提示 #

• 建议把overflow-x: scroll改成overflow-x: auto，这样当元素数量少、没有超出容器宽度时，不会显示多余的滚动条，体验更好。
• 如果你的正方形元素需要响应式宽度，可以用百分比或者calc()来设置宽高，比如width: calc((100vw * 0.9) / 5)（假设一行最多显示5个），不过记得配合横向滚动的逻辑。

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