如何解决使用flex相关属性无法将button在div容器内居中的问题

问题根源 #

你将justify-content、align-items这两个Flex容器属性直接写在了<button>子元素上，这类属性只有设置在开启了display:flex的父元素上才会生效，作用是控制父容器内部子元素的对齐规则，直接作用于子元素不会产生任何效果。同时包裹按钮的.form-group默认会和其他表单字段共享行宽，需要先让它占满整行再做居中处理。

最优解决方案 #

1. 先给包裹按钮的.form-group元素单独加一个自定义类名，避免影响其他表单组的样式：

<div class="form-group form-submit-wrap">
  <button type="submit">Send message</button>
</div>

2. 添加对应的CSS样式，二选一即可：

方案1：Flex布局实现居中

.form-submit-wrap {
  /* 强制占满整行，不和其他表单元素并列 */
  flex: 1 1 100%;
  /* 开启Flex，控制内部按钮居中 */
  display: flex;
  justify-content: center;
}

方案2：文本对齐实现居中（更简单，兼容性更好）

.form-submit-wrap {
  flex: 1 1 100%;
  /* 按钮为行内块级元素，受父容器文本对齐属性控制 */
  text-align: center;
}

可选扩展：按钮铺满整行 #

如果你需要按钮和上方输入框保持相同的宽度，直接给按钮添加宽度属性即可：

.form-group button {
  width: 100%;
  /* 原有按钮样式保留即可 */
}

内容的提问来源于stack exchange，提问作者Nilton Schumacher F