如何将弹性框放置在页面的中心？ [复制]

Posted 2023-03-07

【中文标题】如何将弹性框放置在页面的中心？ [复制]

【英文标题】：How to position a flexbox in the center of the page? [duplicate]

【发布时间】：2020-06-27 23:59:25

【问题描述】：

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

【问题讨论】：

flex 默认是行，所以 justify 控制主轴，而 align 控制交叉轴，你应该能够结合顺风属性来控制主轴和交叉轴对齐

【参考方案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>

【参考方案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”之类的东西？对我来说没有意义。