How to align div horizontally or vertically

Let's take a look at one of the most common implementation examples:

Create a new HTML page,

　　xml/html Code copy content to clipboard

2. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4. < HTML xmlns="http://www.w3.org/1999/xhtml">
6. < Head >
8. < Meta http-equiv= "content-type" Content="text/html"; charset=gb2312 " />
10. < title > Untitled document </title>
12. </ Head >
14. < Body >
16. </ Body >
18. </ HTML >

In the middle, insert the CSS code

CSS code copy content to clipboard

#warp {

Position:absolute;

width:500px;

height:200px;

left:50%;

top:370px;

margin-left:-250px;

margin-top:-100px;

}

Call this CSS in the HTML code

CSS code copy content to clipboard

　　

Total

71

The data meets the criteria

　　

The display is as follows:

Related issues

This allows a layer to be centered is a very common layout, but horizontally centered in HTML using margin:0px Auto; it can be implemented, but using the outer margin vertically is not an effective way to achieve it. (page set height:100%, is invalid), here using absolute positioning + negative outside the way to achieve vertical center, but at the same time to consider the page reset size, you need to use JS to correct.

1, let the layer level center

CSS code copy content to clipboard

. classname{

width:270px;

height:150px;

margin:0 Auto;

}

Use margin:0 Auto to center the layer horizontally and be aware of the width and height required.

2, let the layer vertically centered

CSS code copy content to clipboard

. classname{

width:270px;

height:150px;

Position:absolute;

left:50%;

top:50%;

margin:-75px 0 0-135px;

}

Set the layer to absolute positioning, left and top 50%, with a negative outer margin, and a negative outer margin of half the size of the width.

3. The layer remains centered when the form is reset

JavaScript code copy content to clipboard

$ (document). Ready (function () {

$ (window). Resize (function () {

$ ('. ClassName '). CSS ({

Position: ' Absolute ',

Left: ($ (window). Width ()

-$ ('. ClassName '). Outerwidth ())/2,

Top: ($ (window). Height ()

-$ ('. ClassName '). Outerheight ())/2

});

});

$ (window). Resize ();

});

Here's how to use the jquery method.

Resize () event: triggered when the window is sized to a weight.

Outerwidth (): Gets the outer width of the first matching element (the default includes padding and borders).