Positioning a div in the centre but with dynamic height?

Question

I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.

PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.

Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.

Answer 1

Here you go:

<style>
    .container{
        border: 1px solid Red; 
        width: 300px; 
        height: 500px;
        display:table-cell;
        vertical-align:middle;
    }
    .content{
        border: 1px solid Blue; 
        width: 100px; 
        height:auto;
        min-height: 100px;
        max-height:200px;
        margin-left:auto;
        margin-right:auto;
        overflow:auto;
    }
</style>
<div class="container">
    <div class="content">
        add content here
    </div>
</div>

How it looks like:

Test it.