How to center div vertically inside of absolutely positioned parent div - html

Question

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:
Expectation:
Please suggest how can I achieve that.
Jsfiddle

Answer 1

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).
If you experience font rendering issues (blurry font), the fix is to add perspective(1px) to the transform declaration so it becomes:
transform: perspective(1px) translateY(-50%);
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.

Answer 2

use this :
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
refer this link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Answer 3

Use flex blox in your absoutely positioned div to center its content.
See example https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}

Answer 4

Center vertically and horizontally:
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}

Answer 5

For only vertical center
<div style="text-align: left; position: relative;height: 56px;background-color: pink;">
<div style="background-color: lightblue;position:absolute;top:50%; transform: translateY(-50%);">test</div>
</div>
I always do like this, it's a very short and easy code to center both horizontally and vertically
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="center">Hello Centered World!</div>

Answer 6

EDIT: 10/22 as nowdays, display flex or grid is widely implemented i would suggest to use one or the other (display:table/table-cell will still work if you need compatibility with old or exotic browsers , like my TV...)
flex
.a{
position: absolute;
left: 50px;
top: 50px;
}
.b{
display:flex;
align-items:center;
background-color: pink;
height: 56px;
}
.c {
background-color: lightblue;
}
/* move the flex demo aside */
.a.b{left:100px}
You even need less markup
<div class="a">
<div class="b">
<div class="c">test</div>
</div>
</div>
<div class="a b">
<div class="c">test</div>
</div>
grid (similar at that point)
.a{
position: absolute;
left: 50px;
top: 50px;
}
.b{
display:grid;
align-items:center;
background-color: pink;
height: 56px;
}
.c {
background-color: lightblue;
}
/* move the grid demo aside */
.a.b{left:100px}
You even need less markup
<div class="a">
<div class="b">
<div class="c">test</div>
</div>
</div>
<div class="a b">
<div class="c">test</div>
</div>
Original answer 02/2015 (still efficient everywhere) use with very old or exotic browsers not implementing yet flex or grid
You may use display:table/table-cell;
.a{
position: absolute;
left: 50px;
top: 50px;
display:table;
}
.b{
text-align: left;
display:table-cell;
height: 56px;
vertical-align: middle;
background-color: pink;
}
.c {
background-color: lightblue;
}
<div class="a">
<div class="b">
<div class="c" >test</div>
</div>
</div>

Answer 7

Here is simple way using Top object.
eg: If absolute element size is 60px.
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}

Answer 8

An additional simple solution
HTML:
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}

Answer 9

You can do it by using display:table; in parent div and display: table-cell; vertical-align: middle; in child div
<div style="display:table;">
<div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;">
<div style="background-color: lightblue; ">test</div>
</div>
</div>