Div not centered to page when requested

Question

I have been using a div which spans 100% high and 100% wide no matter what browser window size or screen size and the content should always be fixed in the middle, but for some bizarre reason (Probably because it has been a long day) I cannot seem to find the problem why the content is sat at the top of the page be it in the middle but not equally central from top to bottom?

body{
font-family: 'Open Sans', sans-serif;
color: #FFF;
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
background-color: #1abc9c;  
}

#imgDiv {
position:relative;
height:100%;
width:100%;
background-color: #1abc9c;
color: #FFF;
display:table;
text-align:Center;
}

#imgDiv div {
display:table-cell;
vertical-align:middle;
width:100%;
}

<div id='imgDiv'>
        <h1>
            <img src="img/#.png" style="width: 15%;" />
        </h1>


        <h2>
        <a href="http://www.#.co.uk/" target="_blank">Link</a>
        </h2>



        <center>
            <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a>
            <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a>
            <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a>
            <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a>
        </center>   
</div>

Here is my Fiddle

So the content should be equally spaced from top to bottom and from left to right so in the middle of the browser window. — user3520443, May 29 '14 at 13:47
So, attempting to make some sense of that, what you're saying is you're trying to have it always be centered vertically? Since the horizontal centering is working just fine. — BRW, May 29 '14 at 13:47
Your vertical align css is applied to `#imgDiv div` - but there is no div tag inside #imgDiv. Nothing will be targeted by those styles. — Surreal Dreams, May 29 '14 at 13:48
Your main problem here is that `height: 100%` doesn't work in most browsers when applied to a DIV. — BRW, May 29 '14 at 13:49
I did [this](http://jsfiddle.net/AstroCB/GZcV8/4/), but it's probably overkill... — AstroCB, May 29 '14 at 13:59

score 2 · Accepted Answer · answered May 29 '14 at 13:56

Take a look at this fiddle . You were on the right track, but you needed to add a container div around your imgDiv

HTML

<div id="Container">
    <div id='imgDiv'>
        <h1>
            <img src="img/#.png" style="width: 15%;" />
        </h1>

        <h2>
            <a href="http://www.#.co.uk/" target="_blank">Link</a>
        </h2>

        <center>
            <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a>
            <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a>
            <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a>
            <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a>
        </center>   
    </div>
</div>

CSS

html, body{
font-family: 'Open Sans', sans-serif;
color: #FFF;
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #1abc9c;  
}

#imgDiv {
height:100%;
width:100%;
background-color: #1abc9c;
color: #FFF;
text-align:center;
display:table-cell;
vertical-align:middle;
}

#Container{
    display: table;
    height: 100%;
    width: 100%;
}

You're right, it won't work in older browsers below IE8. However, being that Microsoft doesn't even support XP anymore, I think it's safe to say that, unless there is an odd use case, we can stop writing code for IE8 and below. — mituw16, May 29 '14 at 14:02
That's incredibly dependant on your target audience. Not to mention that many work places will still require compatibility with IE7. Also, last I checked, this method doesn't work in IE8, either. — BRW, May 29 '14 at 14:03
Like I said, it's dependent on a particular person's use case, OP didn't mention anything about needing IE7 compatibility. It does work in IE8 though http://www.quirksmode.org/css/css2/display.html — mituw16, May 29 '14 at 14:04

BRW · Answer 2 · 2014-05-29T14:07:02.957

Generally speaking, height: 100% doesn't work the way you'd expect it to in most browsers, when applied to a DIV.

For what I can think of, you have a few options.

1) Use a table to form your layout. height: 100% does work just fine on those, but using tables for layout is generally frowned upon (though still a functional option).

2) You could wrap imgDiv inside of a series of other DIVs, and apply the styles display: table and display: table-cell respectively, and then have the cell DIV with vertical-align: middle, but honestly, if you're going to do that, I'd just go with #1 and use an actual table. NOTE: This doesn't work in all browsers.

3) You could apply these styles to your DIV: position:absolute; top:50%; height:400px; margin-top:-200px; This will cause your DIV to be positioned halfway down the page, and giving it a margin-top of negative half the height, you end up with the middle of the DIV at the middle of the page. Of course, you can play with the height and margin as you see fit to get it just where you like it.

Div not centered to page when requested

2 Answers2