如何将已水平居中的表单调整至网页正中央？

我希望将表单移动到网页的正中央。目前该表单已设置为水平居中，但它位于网页顶部，我想要让它完全居中（垂直与水平方向都居中）。

原HTML代码：

<body>
    <div class="form">
        <form action="./script.js" method="post">
            <ul>
                <li>
                    <label for="date">Date:</label>
                    <input type="date" id="date" name="date" step="0.1" min="0" 
                        placeholder="What's the date today?" size="50">
                </li>
                <li>
                    <label for="mileage">Mileage:</label>
                    <input type="number" id="mileage" name="mileage" step="0.1" min="0" 
                        placeholder="How many miles today?" size="50">
                </li>
                <li>
                    <label for="note">Notes:</label>
                    <textarea id="note" name="user_message" placeholder="How did the run feel?"></textarea>
                </li>
                <li class="button">
                    <button type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</body>
</html>

原CSS代码：

div.form {
    display: block;
    text-align: center;
}

form {
    margin: 0 auto;
    width: 600px;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 1em;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

form li+li {
    margin-top: 1em;
}

要实现表单垂直+水平双居中，推荐使用CSS Flexbox布局，修改后的CSS代码如下：

/* 让body占满整个视口高度，并设置为Flex容器 */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

div.form {
    /* 移除原text-align:center，Flex已处理水平居中 */
}

form {
    width: 600px;
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 1em;
    text-align: left;
    /* 移除原margin:0 auto、display:inline-block等属性，Flex已处理居中 */
}

form li+li {
    margin-top: 1em;
}

关键说明： #

• min-height: 100vh：让body高度至少等于浏览器视口高度，确保垂直方向有足够空间实现居中
• display: flex：将body转为Flex容器，子元素会遵循Flex布局规则
• justify-content: center：控制子元素水平方向居中
• align-items: center：控制子元素垂直方向居中

如果你更倾向于Grid布局，也可以用以下代码实现相同效果：

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center; /* 同时实现水平和垂直居中 */
}

/* form样式保持不变，移除原有居中相关属性 */

内容的提问来源于stack exchange，提问作者Jordan Mitchell