How to make center align my wrapper class in HTML-CodePudding

<!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  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 >' . $login_err . '</div>';
        }        
        ?>
       

        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div >
                <label>Username</label>
                <input type="text" name="username"  value="<?php echo $username; ?>">
                <span ><?php echo $username_err; ?></span>
            </div>    
            <div >
                <label>Password</label>
                <input type="password" name="password" >
                <span ><?php echo $password_err; ?></span>
            </div>
            <div >
                <input type="submit"  value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
        </form>
    </div>
</body>
</html>

I need to show my wrapper class at the center of the page. I have researched and find out some methods, but this only centered horizontally and the login form is at top of the page. Can someone show me how to use this code to show my login form at the center of page? I need horizontal and vertical center.

I have changed the css class as well. But no any changes.

I am getting the output as below,

I need to show as below,

CodePudding user response：

<!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; 
            height: 100%;
        }
        .wrapper{ 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            padding: 20px;
            margin-left: auto;
            margin-right: auto;
            vertical-align: middle;
            width: 500px;
            background: #000;
            color: #fff;
  
            
 }
    </style>
</head>
<body>
    <div  style="">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>

        <form action="" method="post">
            <div >
                <label>Username</label>
                <input type="text" name="username"  value="<?php echo $username; ?>">
                <span ><?php echo $username_err; ?></span>
            </div>    
            <div >
                <label>Password</label>
                <input type="password" name="password" >
                <span ></span>
            </div>
            <div >
                <input type="submit"  value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
        </form>
    </div>
</body>
</html>

This should do it. I also removed the inline css. You should avoid this in future. I took the main information from this answer.