HTML中如何实现wrapper类元素页面水平垂直居中

问题现状 #

需要将class为wrapper的登录容器在页面中同时实现水平居中与垂直居中，目前仅能实现水平居中效果，登录表单始终显示在页面顶部，多次调整CSS类规则未生效。

原有问题代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ 
            font: 14px sans-serif; 
        }
        .wrapper{ 
            padding: 20px; 
            margin-left: auto;
            margin-right: auto;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div class="wrapper" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>
        <?php 
        if(!empty($login_err)){
            echo '<div class="alert alert-danger">' . $login_err . '</div>';
        }        
        ?>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
                <span class="invalid-feedback"><?php echo $username_err; ?></span>
            </div>    
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
                <span class="invalid-feedback"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
        </form>
    </div>
</body>
</html>

效果对比 #

• 当前实际运行效果：
  
• 期望实现效果：
  

失效原因 #

• vertical-align: middle 仅对行内元素、表格单元格元素生效，普通块级元素设置该属性无法实现垂直居中
• body 元素默认高度由内部内容撑开，不会自动占满整个浏览器视口高度，没有多余垂直空间分配，无法实现垂直方向的居中
• 写在wrapper标签上的内联样式优先级高于<style>标签内的类选择器规则，margin: 0 auto会覆盖你在类中设置的所有边距属性，导致垂直方向的边距规则失效

修复方案 #

使用Flex布局实现居中是兼容性最好、代码最简洁的方案，只需要修改CSS规则，同时删除wrapper标签上的冗余内联样式即可：

1. 替换<style>标签内的原有CSS规则：

body{ 
    font: 14px sans-serif;
    /* 清除浏览器默认外边距，避免出现多余滚动条 */
    margin: 0;
    /* 设置body最小高度为视口高度，占满整个浏览器窗口 */
    min-height: 100vh;
    /* 开启Flex布局 */
    display: flex;
    /* 水平方向居中 */
    justify-content: center;
    /* 垂直方向居中 */
    align-items: center;
}
.wrapper{ 
    padding: 20px;
    width: 500px;
    background: #000; 
    color: #fff;
}

2. 修改wrapper标签的代码，删除原有内联样式：

<div class="wrapper">

修改完成后刷新页面即可看到表单在页面正中间显示，和预期效果一致。

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