为何<button>元素无法使用Flex布局实现内容居中？

核心原因 #

• h1、h2这类块级元素默认宽度为100%，会占满父容器的可用宽度，所以设置display: flex + justify-content: center时，文本会在整个容器宽度范围内居中，效果直观。
• 但button属于表单控件，默认是inline-block类型，宽度由自身内容撑开，容器宽度和内部文本宽度几乎完全一致。这种情况下，justify-content: center没有多余空间来体现居中效果，视觉上就像没生效。
• 另外，浏览器会给button添加默认内边距、边框等样式，也会干扰flex布局的表现。

解决办法 #

方案1：给button设置明确宽度

让button拥有足够空间展示居中效果，比如设置宽度为100%占满父容器：

#increment-btn {
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
  /* 占满父容器宽度 */
  width: 100%;
  /* 也可设置固定宽度，比如 width: 300px; */
}

方案2：重置默认样式+最小宽度

如果不需要button占满宽度，可重置浏览器默认样式，并设置最小宽度让容器略宽于内容：

#increment-btn {
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
  /* 重置默认内边距和边框 */
  padding: 10px 20px;
  border: none;
  /* 设置最小宽度，让容器有多余空间展示居中 */
  min-width: 220px;
}

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