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

Answer 1

Give your link a line-height larger than the text will ever be, and vertically align it in the middle. Then absolutely position it's parent within the div to be at top: 50% and margin top minus half the link's line-height:

jsFiddle

.post {
    position: relative;
}
.post h2 {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
.post h2 a {
    vertical-align: middle;
    line-height: 300px;
    white-space: nowrap;
}

It even works in IE7.