如何将 flexbox 放置在页面的中央？

Question

<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>

所以..我如何使用 TailwindCSS 将这个 flexbox 放在屏幕中间？到目前为止我尝试的一切都失败了！一般来说，我不知道如何在页面上定位 Flexbox。

Answer 1

#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>

Answer 2

<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>

好的，这是一个不错的解决方案。不是我真正想要的。我不明白为什么我不能将属性用作 "top:0" 之类的东西？对我来说没有意义。

如何将 flexbox 放置在页面的中央？

How to position a flexbox in the center of the page?

html

css

vue.js

tailwind-css