ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
12
Mar
2017
#css
#html

How to Center Sign Up Form in 3 Simple Steps

12 Mar, 2017

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.

Tags | #css #html

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy