HTML5 and vertical-align? Fixed now?

Question

I come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.

Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?

How the heck does anyone in their right mind do HTML now? It's a mess!

//// EDIT

I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.

I've tried two methods to align this html:

<nav>
    <ul>
        <li><a href="#!/home">Home</a></li>
        <li><a href="#!/link1">Link #1</a></li>
    </ul>
</nav>

one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?

Answer 1

Why don't you try using display: box with box-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)

http://www.w3schools.com/cssref/css3_pr_box-align.asp