absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 <div class="flex items-center justify-center h-screen"> <img class="object-center" src="{{ asset('assets/images/gifs/loader.gif') }}" alt=""> </div><div class="w-32 h-32 flex justify-center items-center bg-yellow-500"> <div class="w-10 h-10 bg-red-500"></div> </div><!--Use the text-center class--> <div class="text-center"> <p>Centered Text</p> </div><div class="flex items-center ..."> <div>1</div> <div>2</div> <div>3</div> </div> Class Properties items-start align-items: flex-start; items-end align-items: flex-end; items-center align-items: center; items-baseline align-items: baseline; items-stretch align-items: stretch;<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div> </div><div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div> </div>Class Properties text-left text-align: left; text-center text-align: center; text-right text-align: right; text-justify text-align: justify; text-start text-align: start; text-end text-align: end;<!-- align-self: center --> <div class="flex ..."> <div>1</div> <div class="self-center">2</div> <!-- ^ center-aligned div --> <div>3</div> </div>