Question

I tried to center my div using margin: auto like this:

#main-container #control-panel {margin: 10px auto;}

But it still align to the left. I found that I have to specify a width for the div so that it will get centered:

#main-container #control-panel {width: 300px; margin: 10px auto;}

So, is width necessary for centering a div? I thought the width of div should be automatically modified by its inner content? (In this case, I have a button inside the control-panel div)

The result is tested under latest Chrome.

Answer 1

Yes, you have to define width to your div if you want him in center

But in case you didn’t want fixed width then just define text-align:center in parent div & define display:inline-block to it like this:

.parent{
 text-align:center;
} 

.child{
 display:inline-block;
 text-align:left;
}

check this http://jsfiddle.net/sandeep/HzuYv/