<!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>我需要在页面中央显示我的包装器类.我已经研究并找到了一些方法，但这只是水平居中，登录表单位于页面顶部.有人能告诉我如何使用此代码在页面中央显示我的登录表单吗？我需要水平和垂直居中.
我也更改了css类.但没有任何变化.
我得到的输出如下，
我需要展示如下，
