TailwindCSS响应式布局如何实现导航列表垂直居中

你写的对齐类都加了lg:断点前缀，仅在大屏尺寸下生效，小屏状态下菜单容器未启用flex布局，子元素默认按块级元素左对齐排布，自然不会居中。

只需要调整2处类名即可：

• 菜单项外层的<ul>：把原来仅在大屏生效的lg:flex改为flex flex-col lg:flex-row，保留已有的justify-center和items-center。这样小屏下自动启用纵向flex布局，大屏切回横向flex布局，两个尺寸下的居中规则都会生效。
• 每个下拉项外层的<div>和分隔符元素：补flex justify-center w-full lg:w-auto，避免块级元素默认占满宽度导致内容偏左。

<html lang="en">
    <head>
      <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />
    </head>

    <body class="bg-gray-400 font-sans leading-normal tracking-normal">
      <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6 fixed w-full z-10 top-0">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
            <span class="text-2xl pl-2">Brand</span>
          </a>
        </div>

        <div class="block lg:hidden">
          <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>

        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
          <ul class="list-reset flex flex-col lg:flex-row justify-center flex-1 items-center">
            <div class="dropdown dropdown-hover flex justify-center w-full lg:w-auto">
              <a href="#" class="mx-2 text-white text-2xl">One</a>
            </div>
            <p class="mx-2 text-white text-2xl flex justify-center w-full lg:w-auto">•</p>
            <div class="dropdown dropdown-hover flex justify-center w-full lg:w-auto">
              <a href="#" class="mx-2 text-white text-2xl">Two</a>
            </div>
          </ul>
        </div>
      </nav>
      <script>
        // 菜单切换逻辑
        document.getElementById('nav-toggle').onclick = function() {
          document.getElementById("nav-content").classList.toggle("hidden");
        }
      </script>
    </body>
</html>

• 大屏（≥1024px）：导航保持水平排布，所有菜单项、分隔符在容器内水平居中，和原有效果一致
• 小屏（<1024px）：点击汉堡按钮展开菜单后，所有元素纵向排列，每一项都水平居中，不会出现默认左对齐的问题

额外提示：当前代码中<ul>标签直接嵌套<div>、<p>不符合HTML语义规范，正式使用时建议把每个菜单项包裹在<li>标签内，避免部分浏览器出现解析异常，不影响本次居中效果。

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