Center Fixed Element in TailwindCSS - css

Question

I have a flash message that appears when a page is loaded on successful auth and I'm trying to figure out how I can center it horizontally on any device. I am using the TailwindCSS to adjust the placement of the div and have tried fixed and absolute to make sure it appears above my content, but using an attribute like left:50% moves it too far over and margin:auto doesn't center this element. Is there a better approach to what I am trying to do? Is it possible to do with TailwindCSS or will I have to write some CSS for this?
Code:
<div>
<div className="mx-auto sm:w-3/4 md:w-2/4 absolute" id="signin-success-message">
<div className="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" className="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
<div>
...
</div>
</div>

Answer 1

use inset-x-0 with mx-auto
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-x-0 top-10" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
To have vertical centring:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-0 flex items-center" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>

Answer 2

For me it worked like this (div is centered both vertically and horizontally). Also I wanted the modal content to scroll if the content was longer than the div's height:
<div
v-if="isModalOpen"
class="fixed z-20 h-3/4 w-1/2 m-auto inset-x-0 inset-y-0 p-4 bg-white rounded-sm overflow-y-scroll"
>
<button #click.prevent="closeModal">Close me</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas
omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia
voluptatibus nostrum eligendi dignissimos minima itaque, praesentium
corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur
adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi
animi sunt molestiae eos a voluptatem exercitationem voluptate quo,
consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti
laborum quis molestias nulla, reprehenderit eos odio recusandae
consectetur velit saepe explicabo quibusdam quidem? Corrupti.
</div>

Answer 3

use inset-x-0 max-w-max mx-auto
if you don't have element full wide....

Answer 4

The following works for me:
<div className=" bg-gray-500 bg-opacity-75 transition-opacity flex flex-col justify-center items-center">
{children}
</div>