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.

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:

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:

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:


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.