4

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.

Community
  • 1
  • 1
IcyFlame
  • 4,398
  • 16
  • 44
  • 71
  • 3
    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 `
    ` to match that. http://jsfiddle.net/ngVSd/1/ Note; getting the text to *vertically* centred is an entirely different matter.
     – MackieeE Apr 16 '14 at 10:06
  • Duplicate: http://stackoverflow.com/questions/4789835/css-100-height-doesnt-work – Mani Apr 16 '14 at 10:07
  • @MackieeE Well, provide the answer to the "different" matter. – IcyFlame Apr 16 '14 at 13:49
  • 1
    @IcyFlame It's a well covered topic on [**SO previously**](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div), similarly because `
    ` is **not** an `table-cell` element, which `vertical-align` is for. See reference: [**w3.org official docs**](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) on `
    ` has no reference to `vertical-align` ['applies to'](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align).
     – MackieeE Apr 16 '14 at 13:56
  • 1
    To get vertical alignment you have to have a second div inside the first 100% sized one. Approx centering: 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 -'ve margins of 1/2 the width and height. – Will Jenkins Apr 16 '14 at 16:52
  • @MackieeE if you would read the question that you pointed me to, it tells only to center vertically, not horizontally. I suggest that you read my question again. Anyways, I am happy Will Jenkins answer. So, I am gonna go with that! – IcyFlame Apr 17 '14 at 04:33
  • @WillJenkins : Kindly put your solution as an answer, alongwith the code for perfect centering. I will be happy to accept your answer. – IcyFlame Apr 17 '14 at 04:33
  • Ok, it's there as requested... – Will Jenkins Apr 23 '14 at 12:22

4 Answers4

2

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>
Matheus Avellar
  • 1,411
  • 1
  • 22
  • 29
Will Jenkins
  • 7,578
  • 1
  • 20
  • 35
1

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.

taupunkt
  • 131
  • 1
  • 6
  • You are right! I used vertical align without understanding what it does. I like @Will Jenkins' Answer, which I have marked as accepted. – IcyFlame Apr 24 '14 at 13:57
0

You need to set width and height of the html and body (any any other parents) to 100% as well, since 100% means 100% of parent width/height, rather than 100% of the screen.

Filip Haglund
  • 12,351
  • 10
  • 60
  • 102
  • I have done that already. I have all the heights and widths as 100% from html through div. – IcyFlame Apr 16 '14 at 13:48
  • 1
    I think this might be what you need http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – Filip Haglund Apr 16 '14 at 15:18
  • (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) – Filip Haglund Apr 16 '14 at 15:19
  • 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 ? – G-Cyrillus Apr 16 '14 at 16:34
  • Good one, didn't know that div didn't support vertical align. I guess browsers are too permitting. – Filip Haglund Apr 16 '14 at 20:24
0

div parent has no height specified to calculate % .

You need to set height to body, and for % body needs too to calculate from parent's height: html.

<html> will use window's browser as reference to calculate %.

See this on W3C site.

Specifies a percentage height.
The percentage is calculated with respect to the height of the generated box's containing block.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.

G-Cyrillus
  • 85,910
  • 13
  • 85
  • 110