How to Center Sign Up Form in 3 Simple Steps
Hi, everyone!
I am very happy to welcome you on my blog. A couple of days ago I started creating my new project (that I will have presented to you in a couple of weeks). And I have faced the following problem: I wanted to build a page with Sign Up form, and this page doesn’t have any other content. In that case, it made a lot of sense to center the form, both horizontally and vertically. First of all, I have done some research, tried some solutions, and I want to present what worked for me.
Step 1: Set up correct markup structure
My form had both header and form elements, so I had to wrap it in a “div” container with a particular class so that I can style it:
<div class="sign-up-form">
<h1 class="sign-up-title">Sign Up</h1>
<form>
<input type="email" placeholder="Email" name="email"/>
<input type="password" placeholder="Password" name="password"/>
<input type="submit" value="Continue"/>
</form>
</div>
This container (with class “sign-up-form”) is the one that we want to center. Therefore, we need also to wrap it in another container (with class “center-container”) inside which we are centering:
<div class="center-container">
<div class="sign-up-form">
...
</div>
</div>
Step 2: Preparing the page for centering
The page should occupy the full screen so that we can center the form. That means we need give the page correct size, margins, and paddings:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
To be able to center the form container we can add “display: table”:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
Step 3: Center the form container
Now we are going to center the form vertically and horizontally:
.center-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Also, we have to make the form container of the same size as its content. For that, we can use “display: table” and “margin: 0 auto”:
.sign-up-form {
display: table;
margin: 0 auto;
}
Conclusion
That’s it. Now we can center our sign up form.
Thank you for reading.