A straightforward approach with CSS Table

This approach has been around for ages, but is still rarely used over absolute div positioning. We simply add CSS table to the parent div and table-cell to the child div to be centred:-

.vertical-container {
 display: table;
}
.vertically-centered {
display: table-cell;
vertical-align: middle;
margin: auto; /* optional */
float: none;  /* optional */
}

We’ve added tp optional elements here as other rules such as a left float may scupper the layout.

CSS Flexbox Method

Recently we’ve been playing around with the CSS Flexbox property to achive a vertical float and here is a basic example of how to do it:-

.vertical-container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 300px;
}
.vertically-centered { margin: auto; }

An alternative apprach we’ve seen is like so:-

.vertical-container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.vertically-centered {max-width: 50%;}

Potential problems with this approach

Flexbox is awesome, but you’ll find that it can be problematic accross the various browsers and in particular on the Flexible Box Model on old webkit/safari (explained by Paul Irish) that is covered by:-

display: box;
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

Further Reading on Flexbox

Using CSS flexible boxes
A Complete Guide to Flexbox
Using CSS flexible boxes
Designing CSS Layouts With Flexbox Is As Easy As Pie
Solved by Flexbox
CSS3 Flexbox
Using Flexbox: Mixing Old and New for the Best Browser Support

See Flexbox in Action & Generate Flexbox Code

The following are links to visual Flexbox generators:-

Flexbox Composer
FlexyBoxes
Flexplorer: the CSS3 Flexible box layout explorer

Enjoy