How can I make <div> horizontally centered position using tailwindcss?

 <div className="flex overflow-x-auto shadow-md sm:rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-11/12 justify-center">
        <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"
              >
                WHY NOOOO CENTERRRRRRRRRR
              </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>

I’ve used flex, flex item-center, and anything that says it will center the table. But, it never moves to the center position no matter what I do.

>Solution :

It is because there is no parent element which is containing the div spanning accross the entire width of screen.

Possible solutions

1. Try using mx-auto, that will center your table

   Code:

   <div className="flex mx-auto ...">
       <table className="...">         
   

2. If you want to use flex anyways, try wrapping it with a div and give it width of w-screen

   Code:

   <div class="flex w-screen justify-center">
     <div className="flex ....>
       <table> ...
     </div>
   </div>