[Vuejs]-How to position a flexbox in the center of the page?

by

0👍

✅

#a1{
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
}
<div >
  <div id='a1' class="flex justify-center w-full">
    <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div>
    <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div>
    <div class="h-px-500 md:w-1/6 bg-orange-400 text-center">3</div>
  </div>
</div>

0👍

<template>
  <div class="w-screen h-screen items-center flex justify-center">
    <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div>
    <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div>
    <div class="h-px-500 md:w-1/6 bg-orange-400 text-center">3</div>
</div>
</template>

Okay, this was an alright solution. Not really what i wanted doe. I cant figure out why i cant use properties as “top:0” and stuff? doesnt make sense to me.

Leave a comment