How to Center Div Vertically Inside of Absolutely Positioned Parent Div

How to center div vertically inside of absolutely positioned parent div

First of all note that vertical-align is only applicable to table cells and inline-level elements.

There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:

1. Using `transform` and `top`

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Center horizontally and vertically an absolute positioned element without knowing the size

Explanation

Change the CSS property position of the wrapper to relative and of element you want centered to absolute.

Then position the element in the middle of the wrapper using top: 50% and left: 50%.

After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.

So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.

Since we are taking IE8 into consideration, we will use a filter to achieve the same effect as the transform: translate.

In order to generate the filter attribute, the following resource was used: IE's CSS3 Transforms Translator

Example

.box {

  margin: 10px;

  display: inline-block;

  position: relative;

}

.box span {

  position: absolute;

  top: 50%;

  left: 50%;

  background: #fff;

  box-shadow: 0 0 3px rgba(0, 0, 0, 1);

  padding: 5px;

}

.box.translate > span {

  transform: translate(-50%, -50%);

  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

}

<div class="box translate">

  <img src="http://placehold.it/500x200" />

  <span>centered text</span>

</div>

How can I center an absolutely positioned element in a div?

<body>

  <div style="position: absolute; left: 50%;">

    <div style="position: relative; left: -50%; border: dotted red 1px;">

      I am some centered shrink-to-fit content! <br />

      tum te tum

    </div>

  </div>

</body>

Vertically align absolutely positioned element with flexbox

To center the .container element with flex, you need to make the parent a flex container.

The justify-content and align-items properties are declared on a flex container, but apply to child elements (flex items).

However, since .container is absolutely positioned, flex won't work:

An absolutely-positioned child of a flex container does not participate in flex layout.

As an alternative, you can try this:

html { height: 100%; }

body {
   height: 100%;
   position: relative;
}

.container {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

For an explanation of this centering method see this post:

Element will not stay centered, especially when re-sizing screen

Center absolute div in another div

The easy way to vertically and horizontally center a div into another goes like this:

.container {

 position: relative;

 width: 100px; /* not part of solution */

 height: 100px; /* not part of solution */

 background-color: #808; /* not part of solution */

 border-radius: 50%; /* not part of solution */

}

.content {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

 text-align: center; /* not part of solution */

}

<div class="container">

    <div class="content">I'm absolutly centered</div>

</div>

Css vertically center explained

position: absolute takes an element out of the document flow and lets you position it in relation to the next higher ancestor which has position: relative, usually (and intentionally) overlapping other elements (for example text over an image).

top: 50% moves the top of the absolutely positioned element 50% down, i.e. half of the parent's height. That way the top border of the child element will be at the exact center of the parent.

transform: translateY(-50%); moves the absolutely positioned element 50% up, but this time 50% of its own height, above the vertical center of the parent element, resulting in exact vertical centering inside the parent.

All this only works if the parent has position: relative, so it can serve as a position anchor for the absolutely positioned child.

The same goes for horizontal centering, using left: 50% and transform: translateX(-50%);

Combined (i.e. horizontally and vertically) that would be top: 50%; left: 50% and transform: translate(-50%, -50%);

Vertically centering a div inside another div

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

How to vertically center content of child divs inside parent div in a fluid layout

I updated your fiddle: http://jsfiddle.net/yX3p9/7/

I used display: table-cell; in order to use vertical-align: middle;

How to Center Div Vertically Inside of Absolutely Positioned Parent Div