Vertical Centering Absolutely Positioned Block - html

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/

Answer 2

You need to be thinking in terms of %width and %height:
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:relative;
}
.in{
float:left;
width:100px;
height:100px;
margin:25%;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
If you are using fixed pixel widths, then you are going to need to think about how your %margin will affect interior divs based on space constraints.
For example, you have a 200x200 container, with a 100x100 interior DIV. So if you move you interior div 25% away from the exterior, you are moving 200*.25 = (50px). 50+100+50 is 200 which is centering your interior div on all sides.

Answer 3

Will this work for you? (Borrowing code and adjusting from other answer)
.wrapper{
border:1px solid #F00;
width:200px;
height:200px;
position:absolute;
}
.in{
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
position: absolute;
display:inline-block;
border:1px solid #00F;
}
<div class="wrapper">
<div class="in">
DYNAMIC CONTENT
</div>
</div>
Using absolute positioning and 25% on all top/left/bottom/down sides should get your inner div right in the middle regardless of the wrapper size or position on the page.