Tailwind中实现header内logo居中、返回按钮靠右对齐的解决方案

方案1：优先推荐 Grid 布局实现 #

直接替换外层容器的flex相关类为三列网格布局，天然满足「左列空、中列logo居中、右列按钮靠右」的需求，不会出现元素偏移问题，修改后代码如下：

<div class="grid grid-cols-3 items-center mt-10">
    <!-- 第一列占位，不需要填充内容 -->
    <div></div>
    <x-app-logo mode="" classes="pb-8 w-60"></x-app-logo>
    <a href="{{url('/')}}" class="justify-self-end text-green-500 text-lg underline mr-10 font-bold">Back to home</a>
</div>

方案2：Flex 搭配绝对定位实现 #

如果需要保留flex布局，可以给外层容器加相对定位，按钮设为绝对定位固定在右侧，logo自然居中即可，修改后代码如下：

<div class="flex justify-center items-center mt-10 relative">
    <x-app-logo mode="" classes="pb-8 w-60"></x-app-logo>
    <a href="{{url('/')}}" class="absolute right-0 text-green-500 text-lg underline mr-10 font-bold">Back to home</a>
</div>

原问题原因说明 #

之前用justify-between不生效的原因是：该类会让flex容器的子元素沿主轴两端对齐，只有2个子元素时会自动分布在左右两侧，无法实现中间位置留空给logo的效果。

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