HTML: I want to create a DIV thats horizontal centered and reaches from the top to the bottom

I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:

<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>

But I'm not able to make this Div centered. I tried

"margin:auto"

B开发者_开发技巧ut no effect. Th centers the text in the Div, but not the Div itself on th screen.

To center a div you need two things, a width, and automatic horizontal margins. Like this:

#myDiv {
    width:800px; /* or whatever */
    margin:0 auto;
}

There is no need for absolute positioning, just these two rules will do the trick.

to center an Absolutely Positioned div add left: 50%; margin-left: -400px;

where the negative margin value is half the width of the div

Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.

If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/