CSS裕量自动显示内联表

Question

I am trying to center a div (popup dialog) with css. I would like to have a universal css declaration, and I'm nearly there. The css I'm using works, but I have to explicitly define a width to de div.

Demo

in following image the width of the popup is defined as 415px.

In following image the width is defined as AUTO.

When I look at the boxmodel in the downright corner, both are identical. My question is why is the last div wrapping to the left while it has a left margin?

I already tried all the display types. It seems the "table" and "inline-table" style are optimal for centering purpose.

Answer 1

Because margin: auto only works with a defined width . Otherwise the browser doesn't know how to calculate the distance from each side. And yes an alternative to using margin would be to use display: inline-block and adding text-align: center to the parent.