如何在Div中居中按钮？附现有HTML/CSS代码求助

嘿，既然你已经在使用Flexbox构建页面了，那实现按钮居中其实非常顺手！我给你整理了几种适配你现有布局的方案，按需选择就行：

1. 基于你现有Flex布局的「水平+垂直双居中」 #

这是最推荐的方案，完全贴合你已经用到的.main-rows/.main-columns flex布局：

只需要给按钮的父容器（也就是目标Div）添加两个Flex属性就能一键实现双居中：

justify-content: center; /* 控制水平方向居中 */
align-items: center;     /* 控制垂直方向居中 */

为了复用方便，你可以新建一个工具类，不用每次都写重复代码：

/* 新增Flex居中工具类 */
.flex-center {
  justify-content: center;
  align-items: center;
}

然后直接给父Div加上这个类就行：

<!-- 用在垂直排列的容器里 -->
<div class="main-rows flex-center">
  <button>我是居中的按钮</button>
</div>

<!-- 用在水平排列的容器里 -->
<div class="main-columns flex-center">
  <button>我也是居中的按钮</button>
</div>

小提示：如果父容器没有设置固定高度，垂直居中的效果可能不明显——因为容器高度会自适应按钮的高度，你可以给父Div加个height属性（比如height: 200px;）就能看到明显的垂直居中效果啦。

2. 只需要「水平居中」的简化方案 #

如果你不需要垂直居中，只需要按钮在Div里水平居中，那可以根据容器的flex方向做简化：

• 如果是.main-columns（水平flex流）：给容器加justify-content: center;
• 如果是.main-rows（垂直flex流）：给容器加align-items: center;

同样可以做个复用类：

/* 水平居中工具类（适配水平flex流） */
.flex-h-center {
  justify-content: center; 
}

/* 如果你需要适配垂直flex流，改成下面这个 */
/* .flex-h-center {
  align-items: center;
} */

3. 非Flex布局的兼容方案 #

如果你的某个Div没用到Flex，也可以用传统方式实现水平居中：

.text-center {
  text-align: center;
}

然后给父Div加这个类，按钮会自动水平居中：

<div class="text-center">
  <button>我是水平居中的按钮</button>
</div>

这种方式适合只需要水平居中的场景，简单快捷，但没法直接实现垂直居中（需要额外配合padding或position定位，不如Flex方便）。

内容的提问来源于stack exchange，提问作者pasaba por aqui