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

Question

I have a div which contains two child divs, and they are intended to be part of fluid layout, so I can't set a fixed size for them in px.

There are two goals here:

1. Align the two child divs horizontally, which I have achieved using float: left and float: right respectively.

2. Vertically center the text (within the child divs) relative to the parent div. The text is short and takes a single line by design.

What I have now: http://jsfiddle.net/yX3p9/

Apparently, the two child divs do not take the full height of the parent div, and therefore their text are not vertically centered relative to the parent div.

Conceptually, to achieve the goals above, we can either make the child divs vertically centered within the parent div, or we can make the child divs take the full height of the parent div. What is the robust way to do so?

*Browser support: IE 9+ and other usual modern browsers.

Answer 1

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%);
}