Tailwind：当宽度为 1/2 时，flexbox 无法水平居中答案

【问题标题】：Tailwind: flexbox can't center horizontally when width is 1/2Tailwind：当宽度为 1/2 时，flexbox 无法水平居中
【发布时间】：2021-07-11 08:54:21
【问题描述】：

我有这个代码

<template>
  <div class = "signup-form  rounded
            flex flex-col  items-center justify-center
              ">
    Signup

    <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

  </div>
</template>

它显示了这个：

但是我想将宽度设置为页面宽度的一半。当我尝试这个时：

<template>
  <div class = "signup-form  rounded w-1/2
            flex flex-col  items-center justify-center
              ">
    Signup

    <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

  </div>
</template>

我明白了：

为什么会这样？我该如何解决？

编辑：

父组件是App.vue：

<template>
  <div id = "app"
       class=" h-screen font-sans leading-normal tracking-normal mt-10">
    <Header/>

    <div class="flex flex-col md:flex-row">

      <div class="  main-content flex-1   mt-12 md:mt-12 pb-24 md:pb-5 p-5">

        <router-view/>
      </div>
    </div>

    <Footer/>
  </div>

</template>

【问题讨论】：

注册表单是否添加了宽度属性？或者父组件可能已经有宽度？你能检查元素并将鼠标悬停在组件上方吗？
@KevinYobeth 请查看编辑
在代码片段中编写代码。或者给个链接
@VladimirRodichev 我不知道如何制作顺风小提琴。不像是纯js

标签： html css tailwind-css

【解决方案1】：

只需将类添加到适当的标签。见demo。

<div class="flex justify-center">
  <form action="" class="h-96 rounded bg-gray-200 w-1/2"></form>
</div>

【讨论】：

【解决方案2】：

现在这就是我要做的，这是新代码：

{/* now add a new div and put signup and formfield in that new div, the wrapper div will act as a container and now you center the div inside, and on that new div element add display: flex, and position it with justify-content or align-items */}

 <template>

 <div class = "signup-form  rounded w-1/2 flex flex-col  items-center justify-center"> 
 
 <div class="newDiv"> 

   <p>Signup</p>

   <FormField placeholder="Username"/>

   <FormField placeholder="Email"/>

   <FormField placeholder="Password"/>
  </div>
 </div>
</template>

【讨论】：