Vertical Centering Absolutely Positioned Block

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 th

Solution 1:

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

HTML:

<divclass="wrapper"><divclass="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/

Solution 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.

Solution 3:

Will this work for you? (Borrowing code and adjusting from other answer)

.wrapper{border:1pxsolid#F00;width:200px;height:200px;position:absolute;}.in{left:25%;right:25%;top:25%;bottom:25%;position:absolute;display:inline-block;border:1pxsolid#00F;    }<divclass="wrapper"><divclass="in">DYNAMICCONTENT</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.