如何基于子元素定位列表？实现nav内图片居中、列表环绕布局

我需要实现一个导航栏布局：nav容器内包含三个子元素——左侧列表、中间图片、右侧列表，要求图片始终在页面水平中心，两个列表分别排列在图片左右两侧。项目基于Tailwind CSS开发，之前尝试过几种方法但都无效：

• 给nav加justify-center：无效，因为左右列表宽度不同，导致整体居中后图片并非页面真正中心
• 给nav设置固定宽度并加mx-auto：认为这是最优思路，但没能实现预期效果
• 先justify-center再给右侧加与图片容器同宽的边距：完全无效

可行方案一：Grid布局（推荐） #

利用Grid的三列布局，直接让中间列居中，左右列分别对齐两侧，不管列表宽度如何，图片始终处于页面中心：

<nav class="grid grid-cols-3 items-center w-full">
  <!-- 左侧列表 -->
  <ul class="justify-self-start flex gap-4">
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
  </ul>
  <!-- 中间图片 -->
  <div class="justify-self-center">
    <img src="/logo.png" alt="品牌Logo" class="h-14">
  </div>
  <!-- 右侧列表 -->
  <ul class="justify-self-end flex gap-4">
    <li>登录</li>
    <li>注册</li>
  </ul>
</nav>

可行方案二：Flex布局结合自动边距 #

如果更习惯Flex布局，给图片容器添加mx-auto，让它自动填充左右剩余空间，从而强制图片居中：

<nav class="flex items-center w-full">
  <!-- 左侧列表 -->
  <ul class="flex gap-4">
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
  </ul>
  <!-- 中间图片（关键：mx-auto） -->
  <div class="mx-auto">
    <img src="/logo.png" alt="品牌Logo" class="h-14">
  </div>
  <!-- 右侧列表 -->
  <ul class="flex gap-4">
    <li>登录</li>
    <li>注册</li>
  </ul>
</nav>

之前方法失效的原因说明 #

1. justify-center的问题：Flex的justify-center是让所有子元素组成的整体在容器内居中，而非让单个子元素（图片）对齐页面中心，当左右列表宽度不一致时，图片自然偏离真正的水平中心。
2. 固定宽度加mx-auto未成功：大概率是因为子元素没有正确分配空间，比如没有给列表设置合适的对齐方式，或者固定宽度设置过小导致布局挤压，只要配合上述Grid/Flex的子元素布局逻辑，固定宽度的方案也能生效（比如给nav加max-w-7xl mx-auto限制最大宽度，同时保持内部布局逻辑不变）。

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