CSS position implements vertical center layout of DIV browsers

Example

The code is as follows:	Copy code
Position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-left:-100px; margin-top:-100px

POSITION is separated from the document stream by absolute positioning. For browsers,

The vertices in the upper left corner of the DIV are half the width of the entire browser on the left of the browser, that is, 50%.

The vertices in the upper left corner of the DIV are half the height of the entire browser on the top of the browser, that is, 50%.

Now the vertices in the upper left corner of the DIV are in the center of the browser. Then, set margin-left to half of the DIV in the left browser, and set margin-top to half of the DIV in the top browser,

In this way, the DIV is vertically centered.

Why does the POSITION of DIV not need relative positioning ,,

Position: relative; width: 200px; height: 200px; left: 0%; top: 0%; its position in the normal stream

The BODY has no margin height, and top: 50% does not work.

Left: 50% can work, but it is equivalent to half of the BODY. You must set body {marign: 0px;} to be half the width of the entire browser.

Vertical center of text in DIV

(DIV height-text height)/2 is the padding-top value

Then the div height is changed to the height-padding-top value of the original DIV.

See some examples below

1. Center a single row vertically

The vertical-align attribute cannot be vertically centered in the layer. Here we have a clever method: set the height to the same as the line-height!

The code is as follows:	Copy code
<Div style = "line-height: 500px; height: 500;">

2. Layer horizontal center

Set the div width to be smaller than the width of the parent div, and set margin: 0 auto; to center the div.

The code is as follows:	Copy code
# Parentdiv  { Width: 500px;  } # Childdiv { Width: 200px; Margin: 0 auto;  }

3. The text in the layer is horizontally centered

Add text-align: center to the css of childdiv;
 

The code is as follows:	Copy code
# Parentdiv  { Width: 500px;  } # Childdiv { Width: 200px; Margin: 0 auto; Text-align: center;  }

4. Vertical center of the div layer
 

The code is as follows:	Copy code
<Div style = "width: 275px; height: 375px; border: solid red;"> <Div style = "background: green; height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> <Div Style = "background: red; position: static; position: absolute9; top: 50%;"> <Div Style = "background: blue; position: relative; top:-50%;"> Center </Div> </Div> </Div> </Div>

5. Vertical and horizontal center of div layer, long line feed
 

The code is as follows:

Copy code

<Div style = "float: left; width: 275px; height: 375px; border: solid red;"> <Div Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> <Div Style = "position: static; position: absolute9; top: 50%;"> <Div style = "position: relative; top:-50%; text-align: center;"> <Div style = "width: 85px; WORD-WRAP: break-word; TABLE-LAYOUT: fixed; word-break: break-all; margin: 0 auto;"> W center </Div> </Div> </Div> </Div> </Div>

6. div vertical scrolling
 

The code is as follows:	Copy code
<Div Style = "width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

Center
</Div>
7. Vertical and text-align horizontal center

The code is as follows:

Copy code

<Div style = "float: left; width: 275px; height: 375px; border: solid red;"> <Div Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> <Div Style = "position: static; position: absolute9; top: 50%;"> <Div Style = "position: relative; top:-50%; text-align: center;"> <Div style = "width: 275px;"> <Div style = "width: 160px; WORD-WRAP: break-word; TABLE-LAYOUT: fixed; word-break: break-all; text-align: left;"> W Center </Div> </Div>   </Div> </Div>

</Div>
</Div>
8. Vertical and margin horizontal center

The code is as follows:

Copy code

<Div style = "float: left; width: 275px; height: 375px; border: solid red;"> <Div Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"> <Div Style = "position: static; position: absolute9; top: 50%;"> <Div Style = "position: relative; top:-50%;">   <Div style = "margin: 0 auto; width: 160px; WORD-WRAP: break-word; TABLE-LAYOUT: fixed; word-break: break-all;"> W Center </Div> </Div> </Div> </Div> </Div>