Vertically centering a div inside another div

css, html

Solution

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

Problem

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?

Original source

Related problems