On centering a div (margin:0px auto; vs display:inline-block, etc.) - css

Question

NOTE: the motivation behind this post is solely to understand CSS better. CSS remains mostly voodoo to me (despite hours and hours and hours of studying it), and I'm certainly not looking for any more voodoo (i.e. more "workarounds" or "hacks"). I'm looking for insight into CSS.
I have found two approaches for centering a div within its container. (Throughout this post I'll call the div to be centered #inner-div.)
The first approach is based on giving #inner-div the spec margin:0px auto;; the second one consists in giving #inner-div the spec display:inline-block.
AFAICT, the margin:0px auto approach also requires explicitly setting the width of the div, as illustrated in this jsFiddle; the key bit of CSS is
#inner-div {
margin:0px auto;
width:100px;
}
(To see what happens if the width specification above is omitted, see this jsFiddle.)
Similarly, AFAICT, the display:inline-block also requires 1) giving the spec text-align:centered to the element containing #inner-div, and 2) preventing the extraneous bottom-margin that the display:inline-block entails for #inner-div (this could be achieved, e.g., by giving the spec vertical-align:top to #inner-div and, AFAICT, any additional descendants with display:inline or display:inline-block). See this jsFiddle, in particular the following bits of CSS:
#outer-div {
text-align:center;
}
#inner-div {
display:inline-block;
vertical-align:top;
}
I find both approaches problematic. The second approach is clearly problematic, since the display:inline-block gives the affected div text-like semantics, resulting in unexpected behavior (like the seemingly gratuitous bottom margin mentioned above).
The first approach, on the other hand, requires the specification of #inner-div's width. This precludes the possibility of having this width specified implicitly by the widths of the contents of #inner-div. I don't like this: I often need to center divs whose width is difficult for me to determine, even at run-time (e.g. this width may depend on font-metrics, or the way the flow works itself out within #inner-div, etc.). After all, as the jsFiddle's given in this post show, the browser already computes the height of the #inner-div based on its contents (IOW, one doesn't have to explicitly specify #inner-div's height for the browser to do the right thing). Why can't the browser also compute #inner-div's width?
It seems to me that any reasonable layout system would allow one to say to the browser: "figure out the width of this div, based on the width of its contents, and center it within its container".
My question has two parts:
I'm looking for a well-informed confirmation that CSS really does not provide any way to direct the browser to compute the width of a div (based on its contents) and then center said div within its containing element; and
if the answer to the last question is "yes", is this so merely due to poor design on the part of the creators of CSS, or is there a good reason for CSS not to support this natural (to me at least) functionality?
Note: these are difficult questions; the second, in particular, requires not only a a command of the CSS standard, but also an understanding of the design of CSS itself: a pretty tall order!

Answer 1

Without a given width to work with, how would the browser know how to calculate the flow wrapping? It would be nice to tell the browser to 'make it look good', but they just aren't that smart. I feel your pain though; a fixed minimum width with a on-overflow-expand would make life easier.
How about setting the width as a percentage of the page width, or setting it dynamically with script?
I agree setting the div to a inline-block/table-cell/whatever introduces more trouble than it is worth.
BTW "margin: auto;" is enough, "margin:0px auto;" seems contradictory.