为何无法用CSS编辑表单内容？求div屏幕居中多种方法

一、display:inline-block无法调整表单元素位置的原因及修复 #

你的代码里存在几个关键问题导致元素挤在一起，display:inline-block没有起到预期效果：

1. 错误使用Flex属性在非Flex容器上 #

#signup设置了display:inline-block，但同时写了align-items:center——这个属性仅对Flex容器（display:flex/display:inline-flex）生效，对inline-block元素无效，属于无效样式。

2. 重复的ID属性 #

所有<input>都用了id='inp'，HTML规范要求ID必须唯一，重复ID会导致样式选择器行为异常，无法精准控制每个输入框。

3. 内部元素缺少布局控制 #

• .FN和.LN默认是块级元素，会上下堆叠，若想让它们并排，需要给这两个容器设置布局规则；
• 表单项的标签与输入框之间没有间距、宽度控制，导致内容挤在一起；
• <section>容器没有设置布局，内部的表单项无法有序排列。

修复方案 #

修正后的React代码（修复ID重复问题）

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 className="form-group">
            <div className='form-item FN'>
              <label>First Name</label>
              <input type='text' name='FNi' id='first-name' required/>
            </div>
            <div className='form-item LN'>
              <label>Last Name</label>
              <input type='text' name='LNi' id='last-name' />
            </div>
            <div className='form-item'>
                <label>Ph.no / E-mail</label>
                <input type='text' name='em/no' id='contact' pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' required/>
            </div>
            <div className='form-item'>
                <label>password</label>
                <input type='password' name='pas' id='password' required/>
            </div>
            <div className='form-item'>
                <label>Re-enter password</label>
                <input type='password' name='repas' id='re-password' required/>
            </div>
            </section>

            <div className='form-item gender-group'>
                <label>Gender</label>
                <div className="gender-options">
                  <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>
            </div>
            <div className='form-item submit-group'>
              <input type='button' name='submit' value='Submit' />
            </div>
            </fieldset>
            </form>
            <Outlet/>
    </div>
  )
}

export default Signp

修正后的CSS代码（解决布局拥挤问题）

.signupcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 改为100vh让容器占满屏幕高度 */
}

#signup{
    border: 2px solid black;
    padding: 2rem; /* 增大内边距，避免内容挤到边框 */
    margin: 1rem;
    width: 500px;
    display: block; /* 表单用block即可，无需inline-block */
}

.signup h1{
    text-align: center;
    font-size: 30px;
    margin-top: 0;
}

/* 表单项容器布局 */
.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 表单项之间的间距 */
}

.form-item {
    flex: 1 1 calc(50% - 0.5rem); /* 让前两个表单项并排，自动适配宽度 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 标签与输入框的间距 */
}

/* 性别选项布局 */
.gender-group {
    margin-top: 1rem;
}

.gender-options {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

/* 输入框样式 */
#signup input:not([type="radio"]):not([type="button"]) {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 提交按钮样式 */
.submit-group {
    margin-top: 1.5rem;
    text-align: center;
}

.submit-group input[type="button"] {
    padding: 0.7rem 2rem;
    cursor: pointer;
}

二、div居中显示在屏幕中间的几种方法 #

1. Flexbox布局（最常用） #

给父容器设置Flex属性，直接实现水平+垂直居中：

.parent-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 占满屏幕高度 */
}

2. Grid布局（简洁高效） #

一行代码实现双居中：

.parent-container {
    display: grid;
    place-items: center; /* 同时控制水平和垂直居中 */
    min-height: 100vh;
}

3. 绝对定位 + Transform #

适合需要兼容旧浏览器的场景：

.parent-container {
    position: relative;
    min-height: 100vh;
}

.child-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 基于自身尺寸偏移，实现精准居中 */
}

4. Table-Cell布局 #

利用表格的垂直居中特性：

.parent-container {
    display: table;
    width: 100%;
    height: 100vh;
}

.child-div {
    display: table-cell;
    vertical-align: middle; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}

/* 如果子元素是块级，需要额外设置margin:auto保证水平居中 */
.child-div > .inner-block {
    display: inline-block;
    margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者Roshan Rony