How to horizontal & vertical center a div [duplicate]

Question

Here is the source code:

<div id = "outer">
     <div id="top">
     ....
     </div>

     <div id="inner">
     ....
     </div>

     <div id="bottom">
     ....
     </div>
</div>

How do I make the div (id inner), horizontal & vertical center?

I can horizontal center, but I can't make a vertical center...

Answer 1

If you know the dimensions of the inner div you can use CSS.

#outer {
    position: relative;
}

#inner {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

There are other options using display: table-cell and vertical-align: middle, etc.

Other options include JavaScript to dynamically determine the dimensions of the inner div and set the negative margins like the previous answers.