Vertically centering a div inside another div

Question

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?

Answer 1

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

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

you can do it by simply adding css style mentioned above. All the best. for query write comment

Answer 2

Vertical Align Anything with just 3 lines of CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Simplest

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

According to shouldiprefix this are the only prefixes you need

You can also use % as the value for the 'height' property of .parent-of-element, as long as parent of element has height or some content that expands its vertical size.

Answer 3

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 4

You can center the div vertically and horizontally in CSS using flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

And the second one is as following;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

And the resulting HTML:

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

Answer 5

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)

Answer 6

I personally prefer the trick of using a hidden pseudo element to span the full height of the outer container, and vertically aligning it with the other content. Chris Coyier has a nice article on the technique. http://css-tricks.com/centering-in-the-unknown/ The huge advantage of this is scalability. You don't have to know the height of the content or worry about it growing/shrinking. This solution scales :).

Here's a fiddle with all the CSS you'll need and a working example. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}