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.

Answer 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>

Answer 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.