How to put a div in the middle of the page

Question

Not in the middle of the page, as in margin: 0 auto; I'm talking about in the center as in top to bottom. Thank you in advance!

I keep telling people to please search here before posting new questions. Here you go http://stackoverflow.com/questions/16439769/center-a-div-absolute-position-and-width — San, Nov 28 '13 at 15:57
html5 provides some nicer solutions, so I don't think is so bad that it's get asked again — Stefan, Nov 28 '13 at 16:10

score 0 · Answer 1 · answered Nov 28 '13 at 16:00

There are multiple ways:

position: absolute;
left: 50%;
top: 50%;
margin-left: <50% of width from element>;
margin-top: <50% of height from element>;

or:

HTML

<div id="content-wrapper">
    <div class="wrapper">
        Some text  
    </div>
</div>

CSS

#content-wrapper {
   display: table;
   width: 100%;
   height: 100%;
   text-align: center;
}
.wrapper {
   display: table-cell;
   vertical-align: middle;
   position: relative;
}

note: This won't work every time.. I did this on my own site.

score 0 · Accepted Answer · answered Nov 28 '13 at 16:08

With html5 this is pretty easy using flexbox:

This article discribes how to do it http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

and here is the demo (also from the article) http://jsfiddle.net/pnNqd/

HTML:

<h1>OMG, I’m centered</h1>

CSS:

html {
    height: 100%;  
} 

body {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser,
                                    older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21+ */
    display: flex;      /* NEW: Opera 12.1, Firefox 22+ */

    -webkit-box-align: center; -moz-box-align: center; /* OLD… */
    -ms-flex-align: center; /* you know the drill now… */
    -webkit-align-items: center;
    align-items: center;

    -webkit-box-pack: center; -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center;
    justify-content: center;

    margin: 0;
    height: 100%;
    width: 100%; /* needed for Firefox */
} 

h1 {
    display: -webkit-box; display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-align: center; -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    height: 10rem;
}

score 0 · Answer 3 · answered Nov 28 '13 at 16:32

The easiest way if your div is absolutely positioned. Conditions. Your div must have a fixed width and height

#myBox{width:50px; height: 50px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border:solid 1px #000;}

See http://jsfiddle.net/zM2J2/

Put a border to show you an outline.

How to put a div in the middle of the page

3 Answers3