why doesn't height: 100% and width: 100% work?

Question

Frustration

I am frustrated of having to search the internet time and again to find a way to get a simple webpage to fill the whole screen on any device. I don't care about resolution, text size, whether the text comes inside the screen or not or anything else. I don't care about anything. I have one word to display and it should come in the middle of the screen, vertically and horizontally.

CSS is driving me nuts. And I don't get why this ain't simpler. And bootstrap. Well, thanks a lot guys you helped me a lot! But why the hell don't you have a class that would simply take up all the visible space on the screen?

I have tried a lot of variations and none of them work. I just can't get that word to the freaking center of the screen.

Some variation

The simplest one: http://jsfiddle.net/IcyFlame/ngVSd/

<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>

I don't know why this does not work. And I want an answer as to why this does not work. And more importantly, I would really love it if you would just tell me how to make it work. All the time, everywhere.

This is a really useful question: Setting height: 100% on my label element doesn't work

The person who gave the answer says that it is 100% of what. Really cool. And how do I solve the overall problem? Oh no, I just answered the question.

All the questions after that have been marked as duplicates. One of which is:

Height: 100% doesn't work! Why?

Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one.

Note: I am catering to a lot of screen sizes. I don't want to write any kind of absolute pixel heights and widths anywhere in my final code.

Please help me with this issue

Reference: I want the word to come in the middle as it does on this gorgeours website:

http://debarghyadas.com/

Note that this just a reference. I don't want to have the background image. The whole header part of the webpage takes up the whole screen, that is what I want to achieve.

Everything is centered and beautiful. That is where I wanna go.

Solution 1

To get vertical alignment you have to have a second div inside the first 100% sized one.

Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4

If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.

Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
}

#outerDiv {
    height: 100%; 
    width: 100%;
    background-color: red; 
    text-align: center; 
}

#wordDiv {
    position: absolute;
    background-color: lightblue;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin: -50px -50px;
}

<div id="outerDiv">
    <div id="wordDiv">Word</div>
</div>

Solution 2

To be honest, I don't really understand what vertical-align is doing. So I can't really explain where your example fails. But if you don't care about compatibility with IE7 and smaller, you may use the 'display: table' options:

<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>

Hope that helps.

Comments

[MackieeE]

It is correctly at 100%. 100% of it's parent element that is, which is the html, body (Height of the content inside, of which by just the text, is about 20px). Adjusting html, body to 100% will allow the <div> to match that. jsfiddle.net/ngVSd/1 Note; getting the text to vertically centred is an entirely different matter.

[MackieeE]

@IcyFlame It's a well covered topic on SO previously, similarly because <div> is not an table-cell element, which vertical-align is for. See reference: w3.org official docs on <div> has no reference to vertical-align 'applies to'.

[Will Jenkins]

To get vertical alignment you have to have a second div inside the first 100% sized one. Approx centering: jsfiddle.net/ngVSd/4 if you want proper centering you have to set the height and width of the central div explicitly then give it -'ve margins of 1/2 the width and height.

[IcyFlame]

I have done that already. I have all the heights and widths as 100% from html through div.

[Filip Haglund]

I think this might be what you need blog.themeforest.net/tutorials/vertical-centering-with-css

[Filip Haglund]

(html was never ment to support vertical positioning, that should be handled by the browser based on the width of the screen, much like wikipedia)

[G-Cyrillus]

html can be styled, even if it was not meant to be seen, but css value can be inherited or used as reference, like height, font-size. Has anyone read the link to W3C i left up there ?

[Filip Haglund]

Good one, didn't know that div didn't support vertical align. I guess browsers are too permitting.

[IcyFlame]

You are right! I used vertical align without understanding what it does. I like @Will Jenkins' Answer, which I have marked as accepted.