0
<template>
<div>
  <div 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>
</template>

So.. How do i put this flexbox in the middle of the screen using TailwindCSS? Everything i try fails so far! I cant figure out how to position Flexboxes on the page in-general.

iffy
  • 23
  • 1
  • 5
  • flex by default is row so justify controls the main axis while align controls the cross axis, you should be able to combine tailwind properties to control the main and cross axis alignments – Dev Man Mar 16 '20 at 21:23

2 Answers2

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>
DCR
  • 14,737
  • 12
  • 52
  • 115
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.

iffy
  • 23
  • 1
  • 5