HTML CSS如何将class为button的子div在父容器中居中对齐

现有代码的问题 #

• .button为默认块级元素，宽度自动撑满父容器.buttons的全部宽度，没有居中的空间基础
• 父容器.buttons设置的text-align: center仅对行内、行内块元素生效，对块级的.button不生效
• 目前三个.button默认上下堆叠，如果需要按钮横向排列后整体居中，当前也没有对应的布局规则支持

修复方案 #

场景1：按钮保持上下堆叠，每个按钮本身自适应宽度并居中 #

给.button添加如下样式即可：

.button {
  width: fit-content;
  margin: 10px auto 0;
}

场景2：三个按钮横向排列，整体水平垂直居中在容器内 #

修改.buttons的布局规则即可：

.buttons {
  width: 50%;
  height: 70px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 按钮间距可按需调整，不需要可以删除该属性 */
}

如果需要按钮的可点击区域更规范，还可以给.button a添加display: inline-block属性，避免点击范围异常。

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