keeping a div at the centre of page when resizing

Question

So I'm trying to keep my div centred when a page resizes. Like this for example https://accounts.spotify.com/en/login

But when I resize it currently resizes the whole div. Here's the relevant code:

<div id = "wrapper">
    <div id = "formwrap">
        <form action = "./PHP/main_login.php" method = "post">
            <input type = "text" name = "email" id = "email" placeholder = "Email"/><br>
            <input type = "password" name = "password" id = "password" placeholder = "Password"/><br>
            <input type = "submit" name = "submitlogin" id = "submitbut" value = "Login">
        </form>
    </div>
</div>

#wrapper{
    padding-left: 30%;
    padding-right: 30%;
    float: center;
}

#formwrap{
    width:100%;
    background-color: #383838;
    float: center;
    margin: 0 auto;
}

Essentially I'm trying to keep the div and the contents within it the same size while decreasing the horizontal screen size until I call a media query. All help much appreciated

Instead of defining a percentage passing on the outer parent, use a fix width for the child instead. And there isn't such a thing as `float: center`. — Terry, Mar 29 '16 at 23:28
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Terry, Mar 29 '16 at 23:29
Refer to this: [How to keep a floating div centered on window resize](http://stackoverflow.com/questions/2956671/how-to-keep-a-floating-div-centered-on-window-resize-jquery-css) — Shady Alset, Mar 29 '16 at 23:31

Ashkan Mobayen Khiabani · Accepted Answer · 2016-03-29T23:31:17.783

2

Place it in a container div with text-align:center and add display:inline-block to it:

<div style="text-align:center;">
    <div style="display:inline-block;">


    </div>
</div>

Then your div will be at the center of page and its with won't change by resizing but with its content or the width given to it.

Here is the DEMO

edited Mar 29 '16 at 23:31

answered Mar 29 '16 at 23:28

Ashkan Mobayen Khiabani

33,575
33
102
171

Please add an explanation of a description to your answer. – Oisin Mar 29 '16 at 23:29
well I always add the code and then the explanation ;) – Ashkan Mobayen Khiabani Mar 29 '16 at 23:30
OK then it's no problem – Oisin Mar 29 '16 at 23:31
1

I also added a demo please have a look – Ashkan Mobayen Khiabani Mar 29 '16 at 23:33
Exactly what I needed. Thank You. – Generic Snake Mar 29 '16 at 23:37

score 0 · Answer 2 · answered Mar 29 '16 at 23:33

0

Try something like this: https://jsfiddle.net/ogs0mfmn/

#wrapper{
 margin-left: auto;
 margin-right: auto;
}

#formwrap{
 margin-left: 50%;
 margin-right: 50%;
 background-color: #383838;
}

answered Mar 29 '16 at 23:33

Frankely Diaz

886
1
9
16

score 0 · Answer 3 · answered Mar 29 '16 at 23:33

Set a width to your #formwrapper and give it margin: 0 auto

#wrapper{
    padding-left: 30%;
    padding-right: 30%;
    float: center; background-color: blue
    height: 100vh; width: 40%;
}

#formwrap{
    width:200px;
    background-color: #383838;
    margin: 0 auto;
}

Check fiddle

keeping a div at the centre of page when resizing

3 Answers3