Question

Ok, so I am trying to center a div with dynamic content (both its width and height are unknown because the text takes up unknown space and wraps an unknown amount of lines).

Per this post, I managed to center the div horizontally.

However when I apply the same principle to vertical centering, the block only moves 50% down (and doesn’t move up at all).

JSFiddle of my problem here: http://jsfiddle.net/nMqJG/2/ ; as you can see, it is centered horizontally but not vertically…

Thanks and any help appreciated,

Edit: FYI, I am using FF10.0.2

Answer 1

If you don’t need to support old browsers, use display: table-cell. Details here

HTML:

<div class="wrapper">
    <div class="in">
        DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT
    </div>
</div>

CSS:

.wrapper{
    border:1px solid #F00;
    width:200px;
    height:200px;
    display: table-cell;
    vertical-align: middle        
}

.in{
    border:1px solid #00F;
}

Fiddle: http://jsfiddle.net/nMqJG/25/