Vertically Center HTML Element Within a Div of Dynamic Height [duplicate]

Answer 1

I wanted to achieve it in a different way, (just for fun), and this one is working too: jsFiddle

The idea is using a :before block element of 50% height.

html, body{
 height:100%;
}

.post {
    width: 400px;
    height: 300px;
    background: rgba(0,0,0,0.8);
}

.post h2:before{
   content:"";
   display:block;
   height:50%;
}

.post h2 {   
    text-align:center;   
    height:100%; 
}

.post h2 a {
    color: #f7f7f7;
    font-size: 2.2em;
    margin-top:-20px;
    display: block;
}

Hope it helps :-)