DEV Community

Cover image for How to center div tailwindCSS vs Bootstrap
Ahmed Zougari
Ahmed Zougari

Posted on Edited on

How to center div tailwindCSS vs Bootstrap

#css #tailwindcss #bootstrap #webdev

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>
Enter fullscreen mode Exit fullscreen mode
  • bootstrap 
<div class="position-relative">
 <div class="position-absolute top-50 start-50 translate-middle"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex

  • tailwind 
<div class="flex justify-center items-center">
 <div class=""></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • bootstrap 
<div class="d-flex justify-content-center align-items-center">
 <div class=""></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Flex with margin

  • tailwind 
<div class="flex">
 <div class="m-auto"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • bootstrap 
<div class="d-flex">
 <div class="m-auto"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Grid

  • tailwind 
<div class="grid place-items-center">
 <div class=""></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • bootstrap 
<div class="d-grid justify-content-center align-items-center">
 <div class=""></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Grid with margin

  • tailwind 
<div class="grid">
 <div class="m-auto"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • bootstrap 
<div class="d-grid">
 <div class="m-auto"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Which one is your favorite🤔. let us know in comments💬.

Top comments (0)