CSS - How to center a div of variable height and width in the center of another div?

Question

I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)

Answer 1

The only ways to center variable width in all browsers (that I know of) is with

<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>

or JavaScript

As for center horizontal that would force you to use JavaScript (I think)

Answer 2

Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.

<div style='width:400px;height:200px;background-color:#CCCCCC;'>
    <div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'>&nbsp;</div>
</div>

EDIT: Found link that might help on the vertical part:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 3

horizontal centering can be done with CSS:

#containerDiv {
  text-align:center;
}

#innerDiv {
  margin: 0 auto;
  text-align: left;
}

For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.