Vladimirs Vladimirs - 15 days ago 5
CSS Question

How to center div vertically inside of absolutely positioned parent div

I am trying to get blue container in the middle of pink one, however seems

vertical-align: middle;
doesn't do the job in that case.

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


Result:

enter image description here

Expectation:

enter image description here

Please suggest how can I achieve that.

Jsfiddle

Answer

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>

The key point is that a percentage value on top is relative to the height of the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).

It's worth noting that CSS transform is supported in IE9+.

2. Using inline-block (pseudo-)elements

In this method, we have two sibling inline-block elements which are aligned vertically at the middle by vertical-align: middle declaration.

One of them has a height of 100% of its parent and the other is our desired element whose we wanted to align it at the middle.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
	<div class="parent">
        <div class="dummy-child"></div>
		<div class="valign" style="background-color: lightblue;">test</div>
	</div>
</div>

Finally, we should use one of the available methods to remove the gap between inline-level elements.