为什么使用mx-auto无法实现子元素水平居中？

margin-left: auto 与 margin-right: auto 实现水平居中的前提是：元素为块级元素（display: block）且自身宽度小于父容器宽度。

• 你的外层容器是div元素，本身默认就是块级元素，设置了max-width: 550px后宽度小于视口宽度，符合生效条件，所以左右自动边距可以让容器居中。
• 按钮是inline-block类型的元素，行内级元素的宽度默认由内容撑开，自动边距规则对这类元素不生效，所以你给按钮加相同的margin属性没有效果，对应Tailwind的mx-auto自然也不会生效。

你可以根据需求选任意一种方案实现：

1. 改按钮为块级元素（适合想要复用mx-auto类的场景）
   给按钮添加display: block属性即可，对应Tailwind只需给按钮加上block类，配合原有的mx-auto就可以实现居中，不需要修改其他代码，也能实现容器和按钮复用同一个居中类的需求。
   修改后的css示例：

.btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

2. 父容器设置文本居中
   行内/行内块元素会响应父级的text-align规则，给外层.container添加text-align: center属性即可，对应Tailwind只需给容器加上text-center类，不需要修改按钮的样式。
   修改后的css示例：

.container {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  height: 92px;
  text-align: center;
}

3. 父容器使用flex布局
   给外层.container添加flex布局和水平居中规则，对应Tailwind只需给容器加上flex justify-center类即可。
   修改后的css示例：

.container {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  height: 92px;
  display: flex;
  justify-content: center;
}

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