Align horizontally and vertically using div + css

The Helper House (www.bkjia.com) Tutorial previously requires JavaScript code to implement horizontal and vertical center of pages when we made webpage layout. This is a good method, but it is also difficult for friends who are unfamiliar with js Code. Today, let's talk about how to use div + css to implement the horizontal and vertical layout. Let's take a look:

Here I just cut a picture to demonstrate it.

Use div + css to implement the css style code section of horizontal and vertical center:

 

Copy to ClipboardReference: [www.bkjia.com] <style type = "text/css">
/* Top-layer CSS */
# Center
{
Height: 0px;
Width: 0px;

/* Set the location */
Top: 50%;
Left: 50%;
Position: absolute;
}

/* Content layer CSS */
# Content
{
Background: # FF9933;
Width: 300px;
Height: 200px;

/* Set float, out of the middle-level limit (menu is useful )*/
Position: absolute;

/* The two values set here. The first value is width, and the second value is height, but they are both half of the width and height of the DIV */
Margin:-150px 0 0-100px;

/* Demo */
Color: # fff;
}
</Style>

It is a drawback that in the case of a small screen, whether it is to use div + css to realize horizontal and vertical center of pages or to implement horizontal and vertical center of pages through js, complete the configuration without a scroll bar.