Kevin Powell - Community•8mo ago

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 %}

16 Replies

vince•8mo ago

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•8mo ago

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.

AnonymousCoder

CodePen

dyEGEvG

...

Chris Bolson•8mo ago

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:

body{
  min-height: 100svh;
  display: grid;
  place-content: center;
}

body{
  min-height: 100svh;
  display: grid;
  place-content: center;
}

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. 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....

<dialog popover open>
  center
</dialog>

<dialog popover open>
  center
</dialog>

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

StuckCoder50OP•8mo ago

Ok thx for replying ill try it out problem solved👍 i wrapped the whole form in a div with class login_form n added margin-top to it in css. 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•8mo ago

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•8mo ago

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

Chris Bolson•8mo ago

I would add a background image like this:

body::before{
content: "";
    background-image: url(IMAGE_URL);
    position: fixed; /* a fied position ensures that the image is always visible within the viewport*/
    inset: 0; /* shorthand for setting top, right, bottom and left postion */
    opacity: 1; /* adjust this for opacity*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
}

body::before{
content: "";
    background-image: url(IMAGE_URL);
    position: fixed; /* a fied position ensures that the image is always visible within the viewport*/
    inset: 0; /* shorthand for setting top, right, bottom and left postion */
    opacity: 1; /* adjust this for opacity*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
}

StuckCoder50OP•8mo ago

what is this doing? cld u explain pls 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•8mo ago

just change the image according to the page

StuckCoder50OP•8mo ago

but i put this in my styles.css file ok ig i can do it

Chris Bolson•8mo ago

you could define the image url as a custom property and define it in the body tag. <body style="--bg-img:url(IMG_URL)"> In the CSS: background-image: var(--bg-img:); 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. sorry, I missed that question - do you understand it now?

StuckCoder50OP•8mo ago

i dont rlly understand whats inset and z-index also body::before{content: ""

Chris Bolson•8mo ago

inset:0; is the same as setting

top: 0;
right: 0;
bottom: 0;
left: 0;

top: 0;
right: 0;
bottom: 0;
left: 0;

This ensures that the pseudo element is the same size as the parent (body in this case) z-index: -1 ensures that the image is behind any content.

StuckCoder50OP•8mo ago

oh ok

Chris Bolson•8mo ago

All pseudo elements require a content property to be able to show up in the page. As there is no actual content, we set the value to empty.

StuckCoder50OP•8mo ago

ah that makes so much more sense, tysm alr i did it, thx for all ur help

Gaming

Programming

Centering HTML form