Margin: auto doesn't work if display is box in Firefox

Question

In Firefox (version 8.0), if I specify an element to be display: -moz-box and margin: auto, the element is no longer placed at the center of its parent element. It works in Chrome. Is this a problem of Firefox, or am I missing anything? How can I solve this problem?

One workaround can be adding a wrapper div element and setting its display as block, but this is ugly.

Answer 1

-moz-box is the display type for XUL boxes in Firefox. They don't follow a normal CSS box model, so don't auto-center when you use auto margins. So the behavior here is correct in Firefox as far as it goes: that's just the behavior of XUL boxes.

Note that -webkit-box (which I assume is what you meant by "works in Chrome") is a totally different thing: it's an implementation of one of the very early CSS flexbox drafts. It shares some superficial features with -moz-box and for that matter with the current flexbox drafts, but is otherwise completely different.

Now the real question is... what are you actually trying to do?

Answer 2

I created a minimal example and tested it under Firefox 7.0.1 unde ubuntu:

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:block; margin:auto;width:100px;height:50px;">display: block</div>
</div>

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:-moz-box; margin:auto;width:100px;height:50px;">display: -moz-box</div>
</div>

Result is below. Hope this information helps you.

Answer 3

According to the official W3C spec margin: auto; should affect flex elements in the same way as it affects block elements. Firefox's implementation is an early one that is not currently inline with the spec. I have been informed that a fresh implementation will land around version 18.