Centering HTML form

Im trying to display my login form in the middle of the page instead of the top, but i cant figure out how to. I have tried giving the form an id, a class n applying css to those. I have also tried wrapping the form in a div but it dint work.
login.html code:

{% extends "layout.html" %}

{% block title %}
    Log In
{% endblock %}

{% block body_class %}
    login-page
{% endblock %}

{% block main %}
    <h1>Log In</h1><br>
    <form action="/login" method="post">
        <div class="mb-3">
            <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="username" placeholder="Username" type="text">
        </div>
        <div class="mb-3">
            <input class="form-control mx-auto w-auto" name="password" placeholder="Password" type="password">
        </div>
        <button class="btn btn-primary" type="submit">Log In</button>
    </form>
{% endblock %}

{% extends "layout.html" %}

{% block title %}
    Log In
{% endblock %}

{% block body_class %}
    login-page
{% endblock %}

{% block main %}
    <h1>Log In</h1><br>
    <form action="/login" method="post">
        <div class="mb-3">
            <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="username" placeholder="Username" type="text">
        </div>
        <div class="mb-3">
            <input class="form-control mx-auto w-auto" name="password" placeholder="Password" type="password">
        </div>
        <button class="btn btn-primary" type="submit">Log In</button>
    </form>
{% endblock %}

vince•5/20/24, 12:30 AM

hard to tell without seeing the rest of the code; can you make a minimal reproduceable example in a codepen please? #how-to-ask-good-questions

StuckCoder50OP•5/20/24, 5:39 AM

https://codepen.io/StuckCoder50/pen/dyEGEvG
I put all the relevant stuff in this. Excluded the code for the navbar thats on top of each page.

CodePenAnonymousCoder

dyEGEvG

...

Chris Bolson•5/20/24, 7:46 AM

To vertically centre an element within the page the first thing that it needs is that it's parent has to have the full height of the page (viewport).
One method to do this is using min-height and grid on the body:

This can be done with flex in a very similar way.
However bear in mind that that will affect ALL the contents. If you have other elements on the page (nav, footer etc) they will also be moved.
Note - there are other methods to achieve the same thing. The key is that the parent container needs to have the full height.

Chris Bolson•5/20/24, 7:49 AM

There is also a very clever way to achieve the same thing, regardless of other content but this is not fully supported yet. That is to use a dialog.
This is not the intended use of dialog but if it works....

This amazing trick/hack was shared by Temani Afif on ~~Twitter~~ X https://x.com/ChallengesCss/status/1790705680241819992

StuckCoder50OP•5/20/24, 12:17 PM

Ok thx for replying ill try it out

StuckCoder50OP•5/20/24, 2:19 PM

problem solved

i wrapped the whole form in a div with class login_form n added margin-top to it in css.

StuckCoder50OP•5/20/24, 5:46 PM

i was also wondering how i cld add a bg image to the page that covers the complete page n not just the form area? cos whatever i tried only did the form area so i went back to without image.

Chris Bolson•5/20/24, 5:59 PM

you need to position the image relative to the body. Ensure that the image element is not placed within the form (as that has it's own positon defined).

Are you using a background image or an inline image?

I would probably do this with a background image placed within a psuedo element applied to the body. This would allow you to then apply opacity and filters etc. to the image without affecting the body element itself.

StuckCoder50OP•5/20/24, 6:07 PM

well i tried putting the image in a div element above the form's div

Chris Bolson•5/20/24, 6:17 PM

I would add a background image like this:

StuckCoder50OP•5/20/24, 6:25 PM

what is this doing? cld u explain pls

CChris Bolson I would add a background image like this: ```CSS body::before{ content: ""; ...

StuckCoder50OP•5/20/24, 7:06 PM

this put the same image for all the different pages of the web app, but i want to use 2 diff imgs for only 2 pages(login n registration). Any way to do that instead? thx for this tho definitely better

Chris Bolson•5/20/24, 7:08 PM

just change the image according to the page

StuckCoder50OP•5/20/24, 7:09 PM

but i put this in my styles.css file

StuckCoder50OP•5/20/24, 7:10 PM

ok ig i can do it

Chris Bolson•5/20/24, 7:12 PM

you could define the image url as a custom property and define it in the body tag.

In the CSS:

Of course how you actually do this will depend on how you are creating your pages.
Another option would be to apply a class to the body, eg "login", "registration" and then define the background pseudo element just for that selector in the style sheet.