<p class="text-center">Center-aligned text</p><div class="flex items-center justify-center h-screen"> <img class="object-center" src="{{ asset('assets/images/gifs/loader.gif') }}" alt=""> </div><!-- grid only: vertical + horizontal --> <div class="grid place-items-center">Text</div> <!-- grid OR flex: vertical + horizontal --> <div class="flex items-center justify-center">Text</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;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;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;