• Post category:CSS

How to Center a Form in CSS | Step by Step Guide

How to Center a Form in CSS

In this article, we will see about how to center a form in CSS. We create a centered form with the help of CSS. It is possible to bring the form to the center using only HTML, but many people don’t use that method, many people do it in CSS. So, we see both with and without the CSS method.

Without CSS Method

<center>
<form>
Name: <input type="text"><br><br>
E-mail: <input type="text"><br><br>
Pass: <input type="password">
</form>
</center>

Output:

how to center a form in css

 

With CSS Method

CSS:

div{
display:flex;
justify-content: center; }

HTML:

<div>
<form>
Name: <input type="text"><br><br>
E-mail: <input type="text"><br><br>
Pass: <input type="password">
</form>
</div>

Output:

how to center a form in css
In the above code, we have form within the div. So, style the div as shown in the above code.

 

Leave a Reply