How to make center align my wrapper class in HTML

Question

<!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>

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,

There are some issues in your code. On the one hand you want a width of 500px in by inline css of your wrapper class, but on the other hand 360px in your plain css code. You should avoid mixing them up. — Jakob, Jun 07 '22 at 17:12
@Shehan Please show the rendered html, not the PHP code, unless it's significant — Lee Taylor, Jun 07 '22 at 17:21

score 2 · Accepted Answer · answered Jun 07 '22 at 17:24

<!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 class="wrapper" style="">
        <h2>Login</h2>
        <p>Please fill in your credentials to login.</p>

        <form action="" 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">
                <span class="invalid-feedback"></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>

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

How to make center align my wrapper class in HTML

1 Answers1