如何使用CSS flexbox模型居中弹性项内的所有div元素

问题原因 #

text-align: center仅对行内/行内块元素的文本内容生效，你前两个子容器内的<h2>、<p>都是默认宽度100%的块级元素，所以text-align: center会让它们内部的文本居中，视觉上看起来就是整个区域居中。
而你代码中的.main-content__button-1和.main-content__button-2都是设置了固定160px宽度的块级元素，没有占满父容器宽度，块级元素默认左对齐，所以即使父容器设置了text-align也无法让按钮本身居中。

修复方案 #

这里提供两种常用的实现方式，任选其一即可：

方案一：调整按钮父容器的flex属性

给按钮的包裹层.main-content__buttons添加flex配置：

.main-content__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

这种方式无需修改按钮本身样式，后续新增按钮也会自动居中，扩展性更好。

方案二：给按钮添加左右自动外边距

块级元素设置左右auto外边距即可实现水平居中，添加如下代码：

.main-content__button-1,
.main-content__button-2 {
  margin-left: auto;
  margin-right: auto;
}

原有.main-content__button-1的margin-bottom: 10px属性会正常保留，不需要额外调整。

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