Centering 2 Divs inside another vertically

Flexbox solution to center vertically:

#container {
    display: flex;
    align-items: center;
}

OP's original fiddle modified: http://jsfiddle.net/o3pmyb8c/

If you would like to also center horizontally you can add justify-content: center;

Live Demo

Instead, use display: inline-block:

#left, #right {
    display: inline-block;
    vertical-align: middle;
}

Due to using display: inline-block, you have to deal with the whitespace issue. I chose to remove the whitespace in the HTML between </div> and <div id="right">. See here for what happens if you don't do that. Removing the whitespace really is the easiest fix, but there are other ways.

Related