Although it was a little late to the party, flexbox solves a bunch of issues with css layouts.
Here's a working example that doesn't use tables: https://jsfiddle.net/q8zxxr3b/
Or, here's the inline example:
<div style="display: flex; height: 100%; flex-direction: column; align-items:center; justify-content: center;">
<div style="text-align: center;">
<h1>Hello world</h1>
The following green square should be centered:<br />
<div style="display: inline-block; width: 30px; height: 30px; background: green;"></div>
</div>
</div>