xxxxxxxxxx
<!--Use the text-center class-->
<div class="text-center">
<p>Centered Text</p>
</div>
xxxxxxxxxx
<div class="flex items-center justify-center h-screen">
<img class="object-center" src="{{ asset('assets/images/gifs/loader.gif') }}" alt="">
</div>
xxxxxxxxxx
<!-- 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>
xxxxxxxxxx
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;
xxxxxxxxxx
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;
tailwind css align items
xxxxxxxxxx
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;
xxxxxxxxxx
/* Center both horizontally and vertically */
absolute transform top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
/* Center vertically only */
absolute transform top-1/2 -translate-y-1/2
/* Center horizontally only */
absolute transform left-1/2 -translate-x-1/2