Actually Vertically-Aligned CSS (no javascript necessary, horizontally aligned bonus!)

.vertical-align-container { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; }
.vertical-align-container::after { content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; }
.vertical-align-container > .vertical-align-content { display: inline-block; vertical-align: middle; }

That’s it. That’s the magic secret.

For those of you that just want to c/p to see it for yourselves:
<html>
<head>
<style>
.vertical-align-container { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; }
.vertical-align-container::after { content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; }
.vertical-align-container > .vertical-align-content { display: inline-block; vertical-align: middle; }
</style>
</head>
<body>
<div class="vertical-align-container">
<div class="vertical-align-content">
Here is something vertically aligned
</div>
</div>
</body>
</html>

I hope you find this helpful. If you do –

Follow me on twitter @william_beard