How To Center Form In CSS

In this tutorial, we will learn how to center a form using CSS. Centering a form can make it more visually appealing to users and improve the overall design of your web page. By following these simple steps, you can easily center a form on your website.

Step 1: Create your Form

First, create your form using HTML. For this example, we will create a basic form with a few inputs and a submit button.

1
2
3
4
5
6
7
8
9
10
11
12
<form class="center-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
 
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>
 
  <input type="submit" value="Submit">
</form>

Step 2: Create a CSS file

In order to style the form, create a separate CSS file for all the styling. If you don’t already have a CSS file, create one with the following code:

1
<link rel="stylesheet" href="styles.css">

Step 3: Center the Form using CSS Flexbox

One of the best methods to center a form is by using the CSS Flexbox. Add the following code to your CSS file to use the Flexbox and center your form:

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.center-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

The first part of the code sets the properties for the body element. The display: flex; attribute designates the body as a flexible container, while justify-content and align-items are set to center to position the form in the center of the page, both horizontally and vertically.

The second part of the code, .center-form {}, styles the form itself. The display: flex; and flex-direction: column; attributes create a column layout for the form. The align-items: center; positions form elements centrally, and the gap: 10px; attributes create space between each form element.

Step 4: Save and Test your Work

Make sure to save all your files and open the HTML file in a web browser. The form should be displayed at the center of the page, both vertically and horizontally.

Full Code

Here is the complete HTML and CSS code for centering a form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Centered Form</title>
</head>
<body>
  <form class="center-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
 
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
 
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
 
    <input type="submit" value="Submit">
  </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.center-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

Conclusion

Congratulations! You have successfully learned how to center a form using CSS. By using CSS Flexbox, you can easily center your forms, making them more visually appealing and enhancing the overall design of your web page.