title: why doesn't height: 100% and width: 100% work?
body: <p><strong>Frustration</strong></p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p><strong>Some variation</strong></p>
  
  <p>The simplest one: <a href="http://jsfiddle.net/IcyFlame/ngVSd/" rel="noreferrer">http://jsfiddle.net/IcyFlame/ngVSd/</a></p>
  
  <pre><code>&lt;div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;"&gt;Word&lt;/div&gt;
  </code></pre>
  
  <p><strong>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.</strong></p>
  
  <p>This is a really useful question: <a href="https://stackoverflow.com/questions/4789835/css-100-height-doesnt-work">Setting height: 100% on my label element doesn&#39;t work</a></p>
  
  <p>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.</p>
  
  <p>All the questions after that have been marked as duplicates. One of which is: </p>
  
  <p><a href="https://stackoverflow.com/questions/12897958/height-100-doesnt-work-why">Height: 100% doesn&#39;t work! Why?</a></p>
  
  <p>Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one.</p>
  
  <p><strong>Note:</strong> 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.</p>
  
  <p><strong>Please help me with this issue</strong></p>
  
  <p><strong>Reference:</strong> I want the word to come in the middle as it does on this gorgeours website:</p>
  
  <p><a href="http://debarghyadas.com/" rel="noreferrer">http://debarghyadas.com/</a></p>
  
  <p>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.</p>
  
  <p>Everything is centered and beautiful. That is where I wanna go.</p>