Center DIV container both horizontally and vertically

Question

This question is not a duplicate. I tried other methods and they didn't work correctly!

What I am trying to do:

I am trying to put a container div (600x600) right in the middle of the webpage, both vertically and horizontally.

What is happening:

The div only centers horizontally, but not vertically.

What I have tried:

I've followed a few methods. One of which puts another div outside of the container, which is set to display:table, then the container is a table cell. This didn't work.

I also just tried using this which another stackoverflow post suggested:

    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;

This also did nothing for me.

FIDDLE: http://jsfiddle.net/ULHbt/1/

HTML:

<div id="container">
    <div id="largeLogo">Logo</div>
    <div id="redBanner"></div>
</div>

CSS:

body {
    background-color:#d7d7d7;
}
#container {
    margin:0 auto;
    width:600px;
    height:600px;
    border:1px solid;
    background-repeat:no-repeat;
    background-position:center;
    top:50%;
}
#largeLogo {
    position:relative;
    top:167px;
    width:502px;
    height:40px;
    margin: 0 auto;
    border:1px solid;
}
#redBanner {
    top:326px;
    position:absolute;
    width:100%;
    background-color:#d2232a;
    height:42px;
    left:0;
    right:0;
}

@Blazemonger I tried this and it didn't work for me. I did mention this in the question had you bothered to read it. — MRC, Jul 01 '14 at 13:42
Then you didn't implement it correctly. You might have at least linked to that question, though. — Blazemonger, Jul 01 '14 at 13:44
@Blazemonger This is a help site is it not? I tried it, it didn't work for me, I need help working out why. Someone has now mentioned why. Also this solution breaks other parts of my design — MRC, Jul 01 '14 at 13:45
The "other parts of your design" should likewise have been mentioned in your original question. It's unfair to the people trying to help you if their answers are rejected because you provided incomplete information. — Blazemonger, Jul 01 '14 at 13:47

score 4 · Accepted Answer · answered Jul 01 '14 at 13:31

4

When using the absolute position method, you also have to set the width and height.

#container {
    margin:auto;
    width:600px;
    height:600px;
    border:1px solid;
    background-repeat:no-repeat;
    background-position:center;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
}

jsFiddle example

answered Jul 01 '14 at 13:31

j08691

204,283
31
260
272

Thanks, But this then stops the red bar from filling the width of the page. Is there a way to correct this? – MRC Jul 01 '14 at 13:40
Does the red bar need to be within the container? I didn't see anything about the red bar in your question. – j08691 Jul 01 '14 at 13:41
The red bar worked fine previously, It's only stopped displaying correctly from your changes. I put the bar inside the container as it needs to stay in the same place, but stay 100% width of the body – MRC Jul 01 '14 at 13:44
1

The red bar seems affected by _position:absolute;_ of _#container_. In Chrome atleast. – JTK Jul 01 '14 at 13:45
I will change my layout, so the container is 100% width instead. Thanks for your help – MRC Jul 01 '14 at 13:46
I have set container to 100% width, and changed the redbanner to position:relative. This fixed that issue. Thanks – MRC Jul 01 '14 at 13:48

Center DIV container both horizontally and vertically

1 Answers1