如何实现父容器内包含子元素的div居中对齐？

问题原因 #

你遇到的布局错位是inline-block元素的默认垂直对齐规则导致的：

• display: inline-block的元素默认vertical-align属性值为baseline
• 包含文本内容的盒子会将自身内部文本的基线作为对齐参照
• 空盒子的基线默认是盒子的底部边缘，两者对齐基准不一致就会出现上下错位的问题

解决方案 #

方案1：修改inline-block的对齐规则（改动最小） #

给.result-box添加vertical-align: top属性，让所有盒子统一以顶部为对齐基准即可：

.results{
  text-align: center;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
  /* 新增如下属性 */
  vertical-align: top;
}

方案2：改用Flex布局（更稳定，适配性更强） #

直接修改父容器的布局规则，无需调整子元素属性，能自动适配不同内容高度的子元素：

.results{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
}

内容的提问来源于stack exchange，提问作者Muhammad Muneeb Ur Rahman