使用flex布局居中和对齐元素时出现的对齐问题

问题根源 #

• 你为.col设置的flex规则仅作用于它的直接子元素，也就是.top和.bottom两个节点，flex布局默认不会穿透到子元素内部。你需要排列的三个<div>有两个归属.top容器、一个归属.bottom容器，不会被识别为.col下的三个独立flex子项，所以无法按预期实现三个元素的列方向排列居中。
• 额外注意：如果没有给.col设置明确高度，justify-content: center不会有可见效果，因为父容器默认高度由内容撑开，没有额外空间供元素垂直居中。

解决方案（无需修改现有DOM结构） #

方案1：嵌套flex布局（兼容性最好） #

给.top也设置为flex列布局，让内部的两个元素垂直排列，和.bottom的元素统一对齐规则即可：

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: pink;
  /* 按实际需求设置父容器高度 */
  height: 300px;
}
.col .top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col div div {
  background: #ddd;
}

方案2：子项提升（无需修改嵌套层级） #

给.top设置display: contents，该属性会让.top本身不渲染盒子，它的内部子元素直接作为.col的子项参与flex布局，实现三个元素平级排列的效果：

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: pink;
  height: 300px;
}
.col .top {
  display: contents;
}
.col div {
  background: #ddd;
}

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