Vertical Centering Absolutely Positioned Block

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

score 1 · Accepted Answer · answered Mar 05 '12 at 03:42

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/

score 0 · Answer 2 · answered Mar 05 '12 at 02:50

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.

While that does work, it only works if I already know the height of .in, which I purposely don't want to set — Tomas Reimers, Mar 05 '12 at 02:54

score 0 · Answer 3 · answered Mar 05 '12 at 03:20

0

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.

answered Mar 05 '12 at 03:20

francisco.preller

6,559
4
28
39

Unfortunately not, as you can see [here](http://jsfiddle.net/2aeHZ/3/) all that does is force the middle square to have a width and height of 50% – Tomas Reimers Mar 05 '12 at 03:25
Okay, I believe I understand the question, you want the container to first appear right in the center, and then expand vertically as the content fills, whilst still maintaining in the center. Will there be a case in which the container is longer than the wrapper? – francisco.preller Mar 05 '12 at 03:34
If the container is longer than the wrapper the text will wrap and the container will simply expand vertically. And no the vertical expansion of the container will never make it taller than the wrapper. – Tomas Reimers Mar 05 '12 at 03:42

Vertical Centering Absolutely Positioned Block

Edit: FYI, I am using FF10.0.2

3 Answers3

Linked