Vertically centering a div inside another div

I want to center a div which is added 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 values for 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 always irrespective of its size?

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

---

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

---

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)

---

Another way is using Transform Translate

Outer Div must set its position to relative or fixed , and the Inner Div must set its position to absolute , top and left to 50% and apply a transform: translate(-50%, -50%) .

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

链接地址: http://www.djcxy.com/p/2120.html

上一篇: 使用Twitter Bootstrap 3中心列

下一篇: 将div垂直居中在另一个div内