Why isn't this absolute positioned div vertically centering? - html

Question

I need multi-line text to be centered vertically within a parent. I need the child to be position: absolute; because it will have other items in there behind it. I cannot figure out how to make the child (a div containing text) vertically centered. (I also tried doing it with display: table-cell but couldn't get that working either)
https://jsfiddle.net/t7q1ffm2/
HTML:
<div class="box">
<div class="text">This has some text in it that's long</div>
</div>
<div class="box">
<div class="text">Short text</div>
</div>
CSS:
.box
{
position: relative;
top: 0em;
left: 0em;
width: 125px;
height: 125px;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
margin-right: .625em;
margin-bottom: .5em;
text-decoration: none;
overflow: hidden;
display: table;
background-color: red;
}
.box .text
{
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin: auto;
width:100%;
height: 50%;
font-family: Arial, Helvetica;
font-size: 1em;
font-weight: normal;
line-height: 1.125em;
color: #ffffff;
text-align: center;
z-index: 2;
}

Answer 1

If you want to use position relative/absolute, you have to add transform: translate(-50%, -50%); on absolute element for center align.
.box{
position: relative;
top: 0em;
left: 0em;
width: 125px;
height: 125px;
margin-right: .625em;
margin-bottom: .5em;
text-decoration: none;
overflow: hidden;
background-color: red;
}
.box .text {
position: absolute;
top: 50%;
left:50%;
width: 100%;
font-family: Arial, Helvetica;
font-size: 1em;
font-weight: normal;
color: #ffffff;
text-align: center;
z-index: 2;
transform: translate(-50%, -50%);
}
<div class="box">
<div class="text">This has some text in it that's long</div>
</div>
<div class="box">
<div class="text">Short text</div>
</div>

Answer 2

Using flexbox is your best bet. Here is my fiddle, and here is the CSS I used (I cut out some unnecessary CSS):
.box {
position: relative;
top: 0em;
left: 0em;
width: 125px;
height: 125px;
display: flex;
align-items: center;
margin-right: .625em;
margin-bottom: .5em;
text-decoration: none;
overflow: hidden;
background-color: red;
}
.box .text {
margin: auto;
width:100%;
font-family: Arial, Helvetica;
font-size: 1em;
font-weight: normal;
line-height: 1.125em;
color: #ffffff;
text-align: center;
z-index: 2;
}

Answer 3

CSS attribute table-cell does work:
HTML:
<div class="box">
<div class="text">This has some text in it that's long</div>
</div>
<div class="box">
<div class="text">Short text</div>
</div>
CSS:
.box {
width: 130px;
height: 130px;
display: table;
}
.text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
However, you need to wrap that inside another box.
This fiddle illustrates your exact use case: https://jsfiddle.net/stgermaniac/qdc84bxo/