Html 顺风：flexbox can'；宽度为1/2时，t水平居中

我有这个密码

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

---

只需将类添加到适当的标记中即可。看

---

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

{/* 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>

{/*现在添加一个新的div并将signup和formfield放在该新div中，包装器div将充当一个容器，现在您将div放在其中，并在该新div元素上添加display:flex，并将其与justify content或align items一起放置*/}
报名

注册表单是否添加了width属性？或者父组件已经有了宽度？您可以检查元素并将鼠标悬停在组件上方吗？@KevinYobeth请参阅代码段中的editwrite cod。或给予link@VladimirRodichev我不知道怎么做顺风小提琴。它不像纯js

{/* 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>