Need help vertically center a div

Question

I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!

HTML:

<div class="anim">

         <div class="spacer">
            <p>CONTENT</p>
            <p>more content</p>
        </div>

    </div>

CSS:

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:50%;
}

.spacer{
    position:absolute;
    height:300px;
    top:0;
    bottom:0;
}

score 0 · Answer 1 · answered Nov 27 '13 at 23:26

0

.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}

would have it vertically aligned

answered Nov 27 '13 at 23:26

Last Rose Studios

2,461
20
30

You should use another block element between `.anim` and `.spacer` and set it to `display:table-row` if you are going to do something like this. CSS tables should mimic actual tables. – user1934286 Nov 27 '13 at 23:32
yea i tried that method earlier and oddly didn't work :/ – kduan Nov 27 '13 at 23:34
not sure if you had the positioning stuff there earlier, but that would definately stop it from working – Last Rose Studios Nov 27 '13 at 23:35

score 0 · Answer 2 · answered Nov 27 '13 at 23:39

0

An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.

Then you can just add a margin-top :

.anim {
  margin-top: 100px;    // (500 - 300) / 2 = 100
}

demo

answered Nov 27 '13 at 23:39

Aurélien Gasser

3,043
1
20
25

is there a way to do this without a fixed height? I'm using percentages :/ – kduan Nov 28 '13 at 01:47
@kduan Having a fixed height element inside a variable-height container can be a problem: for instance, if 50% is equivalent to 200px, then your 300px element will overflow out of its parent element ! What is the logic behind this 50% height requirement ? – Aurélien Gasser Nov 28 '13 at 03:03
Well I have the screen divided in half. And I want to fit this div inside the bottom half. – kduan Nov 28 '13 at 03:50
For overflow I was planning on doing something different for mobile and smaller screens – kduan Nov 28 '13 at 03:51

score 0 · Answer 3 · answered Nov 27 '13 at 23:42

according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

so the code is really simple

.anim {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

here is the demo http://jsfiddle.net/AbTxS/

Thanks for the help! But the problem is that I can't have a fixed height :/. I should of mentioned that earlier Sorry! — kduan, Nov 28 '13 at 01:50

misterManSam · Answer 4 · 2014-07-16T12:42:52.547

From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.

The div.spacer top margin must be negative half of the .spacer height.

This solution only works with a fixed height for .spacer.

CSS

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:800px;
    background:#FF0
}    
.spacer {
    position:absolute;
    top:50%;
    margin:-150px 0 0;
    width:300px;
    height:300px;
    background:red
}

HTML

<div class="anim spacer">
    <p>
        Content
    </p>
    <p>
        More content
    </p>
</div>

I can't do fixed height sorry :/ – kduan Nov 28 '13 at 01:54 — kduan, Nov 28 '13 at 01:54

Need help vertically center a div

4 Answers4