在 nextjs 中将 div 与 css 居中（移动但不完全居中）

Question

我尝试在 Whosebug 上查看许多问题，其中 none 对我有所帮助。我认为我有一个更具体的问题，可能有某种类型的 CSS 属性阻止 div 居中。也许我需要使用 flexbox 来解决这个问题？

这是 JSX：

import { useState } from 'react'
import styles from '../styles/login.module.css'

import Head from 'next/head'

export default function Login() {
    const [loginDetails, setLoginDetails] = useState({username: "", password: ""});

    function handleUsernameChange(e) {
        var value = e.target.value;
        setLoginDetails({username: value, password: loginDetails.password});
    }

    function handlePasswordChange(e) {
        var value = e.target.value;
        setLoginDetails({username: loginDetails.username, password: value});
    }

    function SubmitLogin() {
        console.log(loginDetails);
    }

    return (
        <>
            <Head>
                <title>Login</title>
            </Head>
            <div className={styles.container}>
                <h1 className={styles.subheading}>Login</h1>
                <label>Username:</label>
                <input type="text" placeholder="username" className={styles.input} onChange={handleUsernameChange} />
                <label>Password:</label>
                <input type="password" placeholder="password" className={styles.input} onChange={handlePasswordChange} />
                <button className={styles.button} onClick={SubmitLogin}>Login</button>
            </div>
        </>
    );
}

这是CSS:

.heading {
    font-size: 3rem;
}
.subheading {
    font-size: 2rem;
}
.pheading {
    font-size: 1.5rem;
}
.paragraph {
    margin-left: 1rem;
}
.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    width: 25%;
    
}
.input {
    border-radius: 5px;
    max-width: 200px;
    height: 30px;
    border: 1px solid #d7dbd9;
}

.input:focus {
    outline: none;
    border: 1px solid #67f0ab;  
}

.button {
    border: 2px solid #67f0ab;
    border-radius: 5px;
    color: #67f0ab;
    background: none;
    max-width: 100px;
    height: 30px;
}
.button:hover {
    background-color: #67f0ab;
    color: #FFF;
}

.button:active {
    background-color: #49de93;
}

我试图居中的元素是 div 包装登录表单。它有 .container 的 class，这个 class 是我在 CSS 中编辑的，试图解决问题。我可以让元素移动到不同的位置，但我无法将它居中。

Answer 1

好的，所以我想出了问题所在，我的容器的 max-width 比容器内最宽的元素大，在这种情况下，它恰好是输入

我将容器的 max-width 值更改为 200px，这与我的 .input class 相同，然后容器及其所有元素都居中。

在 nextjs 中将 div 与 css 居中（移动但不完全居中）

Centering a div with css in nextjs (moves but doesn't completely center)

css

flexbox

reactjs

next.js