Vertically aligning a div

Question

I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".

I have a very simple example on jsfiddle here.

Can anyone help me out with this?

Code:

HTML:

   <div id="container">
        <div class="I-want-to-ignore-this"></div>
        <div class="I-want-to-ignore-this float-right"></div>
        <div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
    </div>

CSS:

#container {

    height: 300px;
    width: 100%;
    border: 2px solid black;
}

.I-want-to-ignore-this{

    float:left;
    height: 75px;
    width: 100px;
    border: 2px solid grey;
}

.float-right {
    float: right;
}

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;

    margin: auto;
    vertical-align: center;
}

Be clear on the question you are posting.. What are you expecting? — NiRUS, Jun 18 '13 at 17:18
@Accipheran: It looks like your container is always a fixed height. Is this just for the example, or will your actual version be fixed height and not adjusting? If it is fixed the easiest fix would be to add the "top" attribute to the center div to adjust its position. — Devon Bernard, Jun 18 '13 at 17:22
@DevonBernard the container will actually be a fixed height in my use case — Peter Berg, Jun 18 '13 at 17:23

Cthulhu · Answer 1 · 2013-06-18T17:31:46.617

1

Add this to center div css:

position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;

Remove margin from there

Add this to container:

position:relative;

Edit: JSFiddle

edited Jun 18 '13 at 17:31

answered Jun 18 '13 at 17:22

Cthulhu

1,379
1
13
25

This didn't seem to work for me. Did you try this out in the fiddle? – Peter Berg Jun 18 '13 at 17:27
Yes. Are you sure you removed `margin:auto`? – Cthulhu Jun 18 '13 at 17:29
I just tried a second time and it did the trick, sorry about that. I'm not sure if it was because I forgot to delete margin:auto or not. +1'ed but gave the accept to Devon Bernard because I like his use of the vertical-align: center – Peter Berg Jun 18 '13 at 17:34

score 1 · Accepted Answer · answered Jun 18 '13 at 17:26

1

In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute.

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;
    position:relative;
    top:70px;
    margin: auto;
    vertical-align: center;
}

Here is the updated JSFiddle.

(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)

answered Jun 18 '13 at 17:26

Devon Bernard

2,250
5
19
32

Thanks a ton! That did it. I think my issue was that I didn't have the position of the div I wanted to (vertically) center set to relative – Peter Berg Jun 18 '13 at 17:29
@Acceipheran No problem, that's what SO is for. Good luck with the rest of your project; and please remember to accept this answer when you are able. – Devon Bernard Jun 18 '13 at 17:29
Alternatively, you can simply tweak the top margin, see my answer below. – Marc Audet Jun 18 '13 at 19:23
@MarcAudet Very true Marc, good point. I believe the only issue with that solution would be if the user wanted to put information in the area above the middle div; but since they didn't that would work. +1 – Devon Bernard Jun 18 '13 at 19:44

score 1 · Answer 3 · answered Jun 18 '13 at 17:31

I would simply add a top margin to your center div:

.I-want-to-center-this-while-ignoring-the-other-two-divs {
    border: 2px solid green;
    height: 150px;
    width: 150px;
    margin: auto;
    margin-top: 73px;
}

Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.

The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2

http://jsfiddle.net/audetwebdesign/7SfKW/10/

NiRUS · Answer 4 · 2013-06-18T17:35:02.010

.I-want-to-center-this-while-ignoring-the-other-two-divs{
    position:relative;
    top:25%;
    border: 2px solid green; 
    height: 150px;
    width: 150px;
    margin: auto;

}

check this: JSFIDDLE

Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.

Just add position and top property to your css as shown above

Vertically aligning a div

4 Answers4