Center a Form in HTML

1. Use the CSS margin Property to Center a Form in HTML
2. Use the CSS text-align Property to Center a Form in HTML
3. Use the CSS width and margin-left Properties to Center a Form in HTML

This article will introduce methods to center a form in HTML.

Use the CSS margin Property to Center a Form in HTML

We can use the margin CSS property to center a form in HTML.

The styles can be written as an inline CSS in the form tag. The margin property defines the space between the container and the adjacent elements.

First, we can provide the value to set a margin for the property. When we use a single value, the value applies to all four directions of the container.

Next, we can use the auto value for the margin property to center the form. For this, we should provide a width of the form for it to be adjusted in the center with the given width.

The auto value will split the remaining distance equally from the left and the right.

For example, create a form tag write the style attribute in it. In the style attribute, set the margin property to auto and the width property to 220px.

Next, create an input tag of text and another input tag of submit.

The example below will create a centered form. The form has a width of 220px, and the remaining space is divided into left and right margins.

In this way, we can create a form with center alignment with margin:auto using CSS in HTML.

Example Code:

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

Use the CSS text-align Property to Center a Form in HTML

We use the text-align property to specify the alignment of the text in CSS. We can use the property as an inline style of the form tag to set the alignment of the form.

The text-align property takes the values like left, right, center, justify, etc. We can set the value to center to center the form.

For example, apply the text-align property to the form tag in the style attribute, and set the property to center. Next, create input tags with the type text and then submit.

The example below will center all the contents of the form. However, the form occupies the whole block as no margin has been specified.

In this way, we can center the form in HTML.

Example Code:

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

Use the CSS width and margin-left Properties to Center a Form in HTML

We can set the form’s width as 50% of the viewport width, and then we can provide 25% of the width as margin to the left. We can use the width and margin-left CSS properties to set the width and margin and achieve our goal.

Finally, we can use the vw unit to specify the length. For example, set width to 50vw and margin-left to 25vw as the style attribute of the form tag.

Here, the value 50vw will occupy 50% of the viewport width, and the value 25vw will give 25% of the viewport width as the left margin. The remaining 25% space will be in the right of the form.

In this way, we can center a form in HTML.

Example Code:

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>