Vertically centering a div inside another div [duplicate]

Question

I want to center a div which is inside another div.

<div id="outerDiv">     <div id="innerDiv">     </div> </div> 

This is the CSS I am currently using.

    #outerDiv {         width: 500px;         height: 500px;         position: relative;     }          #innerDiv {         width: 284px;         height: 290px;         position: absolute;         top: 50%;         left: 50%;         margin-top: -147px;         margin-left: -144px;     } 

As you can see, the approach I use now depends on the width and height of #innerDiv. If the width/height changes, I will have to modify the margin-top and margin-left values. Is there any generic solution that I can use to center the #innerDiv independently of its size?

I figured out that using margin: auto can horizontally align the #innerDiv to the middle. But what about vertical alignment?

Answer 1

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

---

Tested in:

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

---

HTML

<div class="cn"><div class="inner">your content</div></div> 

CSS

.cn {   display: table-cell;   width: 500px;   height: 500px;   vertical-align: middle;   text-align: center; }  .inner {   display: inline-block;   width: 200px; height: 200px; } 

---

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {   position: relative;   width: 500px;   height: 500px; }  .inner {   position: absolute;   top: 50%; left: 50%;   transform: translate(-50%,-50%);   width: 200px;   height: 200px; } 

Demo

---

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {   display: flex;   justify-content: center;   align-items: center;  } 

Demo

More examples & possibilities: Compare all the methods on one pages

Answer 2

Another way of achieving this horizontal and vertical centering is:

.Absolute-Center {   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; } 

(Reference)