How can I make <div> horizontally centered position using tailwindcss? - next.js

Question

<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.

Answer 1

It is because there is no parent element which is containing the div spanning accross the entire width of screen.
Possible solutions
Try using mx-auto, that will center your table
Code:
<div className="flex mx-auto ...">
<table className="...">
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>