How to vertically center content of child divs inside parent div in a fluid layout

I prefer the usage of transform above the above answers.

top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

In my experience it works in many situations and on all major browsers (even IE9+).

If you use SCSS, you might even like to implement this mixin:

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}

I updated your fiddle: http://jsfiddle.net/yX3p9/7/

I used display: table-cell; in order to use vertical-align: middle;

Use line-height. If it's just one line of text, a high line-height will effectively position the text in the middle of the line.

Or try display:table-cell in combination with vertical-align.