无法使用CSS编辑表单内容

Question

所以我是一个初学者，我刚刚完成了一个粗略的注册表单的创建，由于某种原因我无法使用显示：内联块，我需要单独编辑表单的内容这里有什么问题以及我该如何解决这个问题问题是正常的还是每个元素需要如何编辑？

尝试了很多东西，但内部内容不会改变，而且全部放在一起，这里还有其他提示的代码，有人可以告诉我将 div 置于屏幕中间的不同方法吗:)

import React from 'react'
import './signup.css';
import { Outlet } from 'react-router-dom'

function Signp() {
  return (
    <div className='signupcontainer'>
        <form className='signup'id='signup'>
        <fieldset>
            <h1 >Sign-Up</h1>
        <section>
            <div className='FN'>First Name
            <label><input type='text' name='FNi' id='inp' required/></label></div>
            <div className='LN'>Last Name
            <label><input type='text' name='LNi' id='inp' /></label></div>
            <div>
                <label>Ph.no / E-mail</label>
                <label><input type='text' name='em/no' id='inp' pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' required/></label> 
            </div>
            <div>
                <label>password</label>
                <label><input type='password' name='pas' id='inp' required/></label>
            </div>
            <div>
                <label>Re-enter password</label>
                <label><input type='password' name='repas' id='inp' required/></label>
            </div>
            </section>

            <div>
                <label>Gender</label>
                <br/>
                <label><input type='radio' Name='gen'/>MALE</label>
                <label><input type='radio'Name='gen'/>FEMALE</label>
                <label><input type='radio' Name='gen' />OTHERS</label>
            </div>
            <label><input type='button' name='submit'value='Submit' required/></label>
            </fieldset>
            </form>
            <Outlet/>
    </div>
  )
}

export default Signp


#css code 


.signupcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    


}
#signup{
    border: 2px solid black;
    padding: 0.5rem;
    margin: 54px;
    width: 500px;
    display: inline-block;
    align-items: center;
    
}
.signup h1{
    justify-content: center;
    text-align: center;
    font-size: 30px;
}

#inp{
    display: inline-block;
}

Answer 1

我不明白到底是什么问题。但如果你想让

signupcontainer

垂直和水平居中，你将需要一个包装纸。

使用弹性：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用网格：

.wrapper {
  display: grid;
  place-items: center;
} 

使用位置：

.wrapper {
  position: relative;
}
.signupcontainer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}