如何使用Tailwind CSS实现<div>水平居中？表格始终无法居中

问题分析 #

你当前的代码里，外层div设置了w-11/12但未让自身居中，同时内部表格用了w-full，导致表格占满div宽度——即便加了flex justify-center也看不出效果，因为表格已经撑满容器了。

解决方案 #

方案1：让整个含表格的div在页面中水平居中 #

给外层div添加mx-auto类（左右margin自动），这是Tailwind实现块级元素水平居中的标准方式，前提是元素有明确宽度（你已设置w-11/12）。同时可去掉不必要的flex类，overflow-x-auto可直接作用在块级div上：

<div className="mx-auto overflow-x-auto shadow-md sm:rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-11/12">
  <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        <th scope="col" className="px-6 py-3">Date</th>
        <th scope="col" className="px-6 py-3">Job Description</th>
        <th scope="col" className="px-6 py-3">Location</th>
        <th scope="col" className="px-6 py-3">Job Type / $ Rate (hourly)</th>
        <th scope="col" className="px-6 py-3">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr className="bg-white dark:bg-gray-800 dark:border-gray-700">
        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-pre-wrap text-xs dark:text-white">
          NOW IT'S CENTERED!
        </th>
        <td className="px-6 py-4">Sliver</td>
        <td className="px-6 py-4">Laptop</td>
        <td className="px-6 py-4">$2999</td>
        <td className="px-6 py-4">
          <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
        </td>
      </tr>
      <tr className="bg-white dark:bg-gray-800">
        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
          Magic Mouse 2
        </th>
        <td className="px-6 py-4">Black</td>
        <td className="px-6 py-4">Accessories</td>
        <td className="px-6 py-4">$99</td>
        <td className="px-6 py-4">
          <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

方案2：让表格在div内部水平居中 #

如果你希望表格在div里居中（而非整个div居中），需要给表格设置小于div的宽度（比如w-10/12），然后给表格添加mx-auto，或者给div加flex justify-center：

<div className="overflow-x-auto shadow-md sm:rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-11/12">
  <table className="mx-auto w-10/12 text-sm text-left text-gray-500 dark:text-gray-400">
    {/* 表格内容同上 */}
  </table>
</div>

关键说明 #

• mx-auto是块级元素水平居中的核心，只要元素有确定宽度就能生效。
• 你之前用的flex justify-center无效，是因为表格的w-full让它占满了flex容器的宽度，没有多余空间体现居中效果。

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