Tailwind mx-auto无法居中元素的原因及非text-center解决办法

为什么 mx-auto 不生效？ #

mx-auto 依赖元素具备块级特性（或处于 flex 容器中）才能生效。你代码里的 <a> 使用了 inline-flex，属于行内级元素——在普通块级父容器中，行内级元素的左右 auto 外边距会被浏览器解析为 0，自然无法实现居中。

无 text-center 情况下的居中方案 #

以下三种方案都不需要给父元素添加 text-center 类：

方案1：将 <a> 改为块级 flex 元素 #

把 inline-flex 替换为 flex，同时用 w-fit 限制元素宽度为内容宽度，此时 mx-auto 即可正常分配左右外边距：

<div class="h-48 w-full bg-red-400">
  <a class="mx-auto flex items-center w-fit bg-blue-400 px-8 py-5">Hello</a>
</div>

方案2：给父元素设置 flex 布局 #

给父容器添加 flex items-center justify-center，利用 flex 布局的居中特性，<a> 保持原有 inline-flex 即可居中：

<div class="h-48 w-full bg-red-400 flex items-center justify-center">
  <a class="inline-flex items-center bg-blue-400 px-8 py-5">Hello</a>
</div>

方案3：相对定位 + 平移实现居中 #

通过相对定位和 CSS 变换实现居中，不受元素 display 类型限制：

<div class="h-48 w-full bg-red-400">
  <a class="relative left-1/2 transform -translate-x-1/2 inline-flex items-center bg-blue-400 px-8 py-5">Hello</a>
</div>

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