Question

There are two questions.

1. Firstly, if there is no height set on divs, and there is no element
   contained inside them, won’t they display at all?

2. Secondly, depending on the first question, if I want to display a
   div to be 90% of the body height and centered both horizontally and
   vertically, even if there is no content inside of it, what is the
   css required?

Answer 1

To completely centre a div (or any block element) you should use absolute positioning in combination with negative margins. Take a look here: enter link description here. Try resizing the window: it’s positioning happens automatically.

div {
    width: 90%;  /* Can be a non-percentual number */
    margin-left: -45%; /* negative value of element's width/2 | Can be a non-percentual number */
    margin-top: -45%; /* negative value of element's height/2 | Can be a non-percentual number */
    height: 90%;  /* Can be a non-percentual number */
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}​

Of course, when you are only using percentual values, it is easier to just do the math: 50% – 45% = 5% (as Zeta’s post suggest) but I used this method to show that this works with non-percentual values as well. Example.

div {
    width: 320px;
    margin-left: -160px; /* negative value of element's width/2 */
    margin-top: -120px; /* negative value of element's height/2 */
    height: 240px;
    position: absolute;
    top: 50%; /* must always be 50% */
    left: 50%; /* must always be 50% */
    border: 1px solid;
}​

When an element does not have a specific height and it doesn’t have content, you will not see it, no. It will have an automatic width (normally 100%) but no height. You can make it visible though, by adding a border: http://jsfiddle.net/TALAA/2/