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
<div class="flex items-center justify-center h-screen">
<img class="object-center" src="{{ asset('assets/images/gifs/loader.gif') }}" alt="">
</div>
xxxxxxxxxx
<!--Use the text-center class-->
<div class="text-center">
<p>Centered Text</p>
</div>
xxxxxxxxxx
<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>
xxxxxxxxxx
<div class="flex items-center ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
xxxxxxxxxx
<div class="flex items-center justify-center h-screen">
Centered using Tailwind Flex
</div>
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;
xxxxxxxxxx
<!-- align-self: center -->
<div class="flex ...">
<div>1</div>
<div class="self-center">2</div>
<!-- ^ center-aligned div -->
<div>3</div>
</div>
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;