Take the 2-minute tour ×

We're using the display:-moz-box/-webkit-box to vertically center a div within another div. If it works when the child div has an absolute width, it is not properly renderer on Firefox when the child's width is just a percentage.

<div style="background:yellow;height:40px;display:-moz-box;-moz-box-pack:center;
    <div style="width:70%;background:blue;text-align:center">
        Hello World

Chrome Chrome OK

Firefox Firefox KO

Here's a fiddle to demonstrate the issue : http://jsfiddle.net/sBdWW/

Any help would be appreciated Cheers

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You are using an outdated flexbox specification.

share|improve this answer
Wow that was fast, and it Works like a charm ;) BTW What would be the equivalent for IE ? –  Delta Aug 21 '13 at 20:38
Never tried IE and I don't have a Windows box around ATM to check, but caniuse.com/#search=flex says IE 10 is kinda supported with -ms prefix. –  nmaier Aug 21 '13 at 20:46
Perfect. Here's a fork of your fiddle for IE/Chrome/Firefox : jsfiddle.net/hberf . Keep up the good work :) –  Delta Aug 21 '13 at 23:42
add comment

Your Answer


