Table of contents
All know how much we suffer while centering a div😜. so I decided to share this tutorial. How to center a div using utility classes tailwind and bootstrap.
NB: this is not a comparison between tailwind and bootstrap.
Absolute
- tailwind
<div class="relative"> <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"></div> </div>
- bootstrap
<div class="position-relative"> <div class="position-absolute top-50 start-50 translate-middle"></div> </div>
Flex
- tailwind
<div class="flex justify-center items-center"> <div class=""></div> </div>
- bootstrap
<div class="d-flex justify-content-center align-items-center"> <div class=""></div> </div>
Flex with margin
- tailwind
<div class="flex"> <div class="m-auto"></div> </div>
- bootstrap
<div class="d-flex"> <div class="m-auto"></div> </div>
Grid
- tailwind
<div class="grid place-items-center"> <div class=""></div> </div>
- bootstrap
<div class="d-grid justify-content-center align-items-center"> <div class=""></div> </div>
Grid with margin
- tailwind
<div class="grid"> <div class="m-auto"></div> </div>
- bootstrap
Which one is your favorite🤔. let us know in comments💬.<div class="d-grid"> <div class="m-auto"></div> </div>