[briansul]

First post on the forum, I've read the guidelines but please let me know if this post is inappropriate for any reason.

I would like to center dynamic html content within a larger container div, but I would like it to be centered both horizontally and vertically within its container.

<style>
#container {width:960px; background-color:#fcfcfc;}
#container div {
background-color:#ffffff;
color:blue;
display:inline-block;
text-align:center;
}
</style>

<div id="container">
<div class="panel">
<h1>Panel 1</h1><br/><p>Panel 1 Content</p>
</div>
<div class="panel">
<h1>Panel 2</h1><br/><p>Panel 2 Content</p>
</div>
<div class="panel">
<h1>Panel 3</h1><br/><p>Panel 3 Content</p>
</div>
</div>

Assuming that those 3 panels were generated dynamically (and would likely differ in their height & width), how is it possible to automatically have them align to the horizontal and vertical center of the container div, while remaining equidistant (from each other and the edges of the container). Note that the container div's width is the only concrete size attribute (960px).

Ideally the container div's height would adjust to the size of the largest panel, and any amount of panels could be generated that would still be centered in the container and be equidistant.

For this particular scenario, let's not worry about what would happen if say 20 panels were generated (that would get messy).

I have tried many methods found through google searches, including
1) margin:0 auto; for the panel divs.

2) position:relative; left:50%; for the container and position:relative; right:-50%; for the panel divs.

3) <div align="center">Content</div> for the panel divs.

None of these have centered the inner divs both vertically and horizontally, and don't conform to dynamically generated content.