Center container horizontally and vertically

Question

Looking over other question on this site, I used a method of setting all the positions to 0 with auto margins, but this has some unwanted behavior.

If you resize the window vertically, the top of the container moves off of the top of the page. It needs to stop when it hits the top.

JSFIDDLE:

http://jsfiddle.net/jd67ca5y/

HTML:

<div id="container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
</div>

CSS:

#container {
    margin:auto;
    height:300px;
    width:300px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
    border:1px solid;
    padding:10px;
}

Seemms that the answer is to use CSS Tables. http://stackoverflow.com/questions/17520145/center-a-div-horizontally-and-vertically-responsively?rq=1 — MRC, Aug 21 '14 at 09:54
If I understand yor question right what you need is a minimum margin top which obviously is made up but this http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/ might be helpful instead. — Doug, Aug 21 '14 at 09:55
Never mind I forgot all about vertical-align: middle, my bad. — Doug, Aug 21 '14 at 09:56
@Joey Have a look at flexbox (align-items and justify-content seems what you need): http://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Florian Gl, Aug 21 '14 at 09:58
There might be the same problem though with flex possibly. Look at this example it still does the same http://jsfiddle.net/agilius/a9kXU/3/ — Suzi Larsen, Aug 21 '14 at 10:06
Are you definately only wanting to use css and no javascript or jquery? — Suzi Larsen, Aug 21 '14 at 10:12

Dark Hippo · Accepted Answer · 2014-08-21T10:32:41.023

2

I think this is what you want, in Chrome at least... http://jsfiddle.net/h6Lh9z0e/4/

Slightly modified HTML

<div id="container">
    <div id="inner-container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
    </div>
</div>

More modified CSS

#container {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ff0;
display:flex;
align-items:center;
justify-content:center;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-ms-flexbox;
-ms-flex-align:center;
-ms-flex-pack:center;

}
    #container #inner-container {
        border:solid 1px black;
        padding:10px;
        width:300px;
        height:300px;
    }

I'm not sure about things like IE though, haven't had to work with that for a long time, but I know it doesn't support webkit.

Sorry for the half answer, but hopefully it'll help some.

EDIT: Ok, so turns out you can add in MS specific flexbox code to center it, but you still get the same disappearing top issue when you shrink the window vertically...

EDIT 2: Right, turns out that the -ms prefix is being depreciated from IE10 onwards (http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx), so looks like you'll need to put non-prefixed names as well.

edited Aug 21 '14 at 10:32

answered Aug 21 '14 at 10:09

Dark Hippo

1,255
2
15
35

are wa wa wa..Awesome Dude..I like it – Dinesh Kanivu Aug 21 '14 at 10:12
I have no idea why, but this also isn't working for me. Starting to this all of these answers only are not working for me. – MRC Aug 21 '14 at 10:27
Which browser are you using? I'm assuming Chrome (since everyone and his dog seems to use it now a days) – Dark Hippo Aug 21 '14 at 10:29
No, wait, my bad, I think I broke it by shoe horning in the IE stuff... if you take that out it should still work – Dark Hippo Aug 21 '14 at 10:30
Try that now, should work as described in Chrome (IE is still an issue though) – Dark Hippo Aug 21 '14 at 10:33
@DarkHippo Seems that it's just `display:flex;` that breaks it. Works otherwise. Thanks! I will do some testing with other browsers. – MRC Aug 21 '14 at 10:33
I think it's down to the hierarchical nature of CSS, the later properties will override the earlier ones, so as long as you put display:flex in before display:-webkit-box then the -webkit-box should override it and it should work for you (see the edited code above) – Dark Hippo Aug 21 '14 at 10:37
Tested with IE 11 and didn't work. Unfortunately the client seems to prefer sticking to IE 11 so I will have to use CSS Tables on this occasion. Thanks for your time! – MRC Aug 21 '14 at 11:54

score 1 · Answer 2 · answered Aug 21 '14 at 11:14

Here's a method that does what you want: http://codepen.io/pageaffairs/pen/spthD

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">

html,body,div,p {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
}

body {
    width:100%;
    display:table;
    background:#00F;
}

#pageWrapper {
    display:table-cell;
    min-height:100%;
    text-align:center;
    vertical-align:middle;
}

#content {
    width:50%;
    min-width:512px;
    margin:0 auto; /* for non display:table browsers */
    padding-top:1em;
    text-align:left;
    background:#DEF;
}

#content p {
    padding:0 1em 1em;
}
</style>

</head>
<body>

<div id="pageWrapper">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

</body>
</html>

Source

This is the method I'm going to go with, although slightly different to this. — MRC, Aug 21 '14 at 12:47

Bhojendra Rauniyar · Answer 3 · 2014-08-21T10:00:23.747

Set overflow:auto; to make it work in every size:

#container {
    margin:auto;
    height:300px;
    width:300px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
    border:1px solid;
    padding:10px;
    overflow: auto;
}

working fiddle

Another solution is to use like this:

#container {
    margin:auto;
    height:300px;
    width:300px;
    margin-top: -150px; /* half of the height */
    margin-left: -150px; /* half of the width */
    top:50%;
    left:50%;
    position:absolute;
    border:1px solid;
    padding:10px;
    overflow:auto;
}

demo

Center container horizontally and vertically

3 Answers3