Align horizontally and vertically using Div + CSS

In the past, JS was used to implement horizontal and vertical center of pages during webpage layout. Code . 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: <Style type = "text/CSS"> /* CSS in the middle layer */ # Center { Height: 0px; Width: 0px; /* Set 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 are 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> Please download the specific effect by yourself Source code Run and check the results. Hope to help you. Example: http://www.po-soft (listly). com/blog/listly/500.html (declared address removed "(listly)" will be valid)

remind everyone whether it is used Div + CSS to realize horizontal and vertical center of pages or JS to achieve the horizontal and vertical center of pages, there is a defect, that is to say, in the case of a small screen, there is no scroll bar to complete.