I was recently building a website using NuxtJs and ran into a problem: I cant center components in a that are in a flex column. but when i removed the "flex-col" class everything seemed to work fine.Here's my code:
<script setup></script><template><div class="bg-slate-800"><div class="h-48"></div><div class="flex flex-col justify-center"><div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div><div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div><div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div></div></div></template>As you can see there's only one flex element. And i also set the width of the elements so i can be sure those divs werent taking all the width. Here's the result
But when i remove the "flex-col" statement, it all goes well:
I tried most of the solutions i found on the internet. Like 'm-0', making the elements flex and so on.