How to Center a Form Using HTML and CSS

Creating a visually appealing and well-centred form on your webpage is crucial for a better user experience. Here’s a simple guide on how to achieve a perfectly centred form using HTML and CSS.

When designing a form, centring it on the page ensures that it grabs the user's attention without compromising aesthetics. Let's delve into the steps required to achieve this:

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Login Form</title>
    <!-- Link your CSS file -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Add Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <div class="mygrid">

        <div class="centeredDiv">
            <h1 class="centero">Login</h1>
            <div class='input-container'>
               <label class="lab">Email Address</label>
               <input type="email" placeholder="Email Address" />
               <span class="icons"><i class="fa fa-envelope"></i></span>
           </div>
           <div class='input-container'>
               <label class="lab">Password</label>
               <input type="password" placeholder="Password" />
               <span class="icons"><i class="fa fa-lock"></i></span>
           </div>

           <div class="marg">
               <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
               <label for="vehicle1"> Remember Me</label>
           </div>
           <button class="buttoner">Login</button>
          <p class="centero"> <a href="#" class="decor">Forgot your password?</a> </p>



        </div>


    </div>
</body>
</html>

CSS Styling

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



.mygrid {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 10px;


}

.centeredDiv {
    background-color: blue;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    height: 100%;
    overflow-y: scroll;
    border: 1px solid black;
    border-radius: 5px;
}


.input-container {
    margin-bottom: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-container input {
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.icons {
    position: absolute;
    top: 37px;
    left: 10px;
}

.centero {
    text-align: center;
    color: black;
}

.buttoner {
    width: 100%;
    background-color: rgba(12, 70, 163, 0.781);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
}

.decor {
    text-decoration: none;
    color: rgb(3, 39, 121);
}

.marg {
    margin-bottom: 10px;
}

Explanation

HTML Structure: Wrap your form within a container div (here, .centeredDiv) placed inside a parent div (.mygrid).
CSS Styling: The key to centring the form is to use Flexbox. The .mygrid div employs display: flex, justify-content: center, and align-items: centre to horizontally and vertically centre its child elements.
Adjust the styles within .centeredDiv to customize the form as per your design requirements. Here, we have specified a max-width, set a background color, added padding, borders, and more.
Use media queries (@media) within the CSS file to apply specific styles for different screen sizes, ensuring your form looks great on various devices.

By following these steps and tweaking the styles to match your design preferences, you can easily create a beautifully centered form that enhances the aesthetics of your webpage.

iRuemu Coding Blog

iRuemu Coding Blog

How to Center a Form Using HTML and CSS

HTML Structure

CSS Styling

Explanation