CSS Absolute absolute positioning centered Example

We often use ' margin:0 auto ' to achieve horizontal center, and always think ' margin:auto ' can not achieve vertical center ... In fact, achieving vertical centering requires only declaring element heights and the following CSS:

The code is as follows	Copy Code
. Absolute-center { Margin:auto; Position:absolute; top:0; left:0; bottom:0; right:0; }

Method Two

Position:absolute;
top:50%;
left:50%; You can only position the div in a red circle as the starting point, plus margin:-100px 0px 0px-100, you will be able to move it to the red dot as the center of the position.

Sample code:

div layer absolutely centered "vertical and horizontal"

The code is as follows	Copy Code
#content { Position:absolute; width:650px; height:298px; left:50%; top:50%; margin-left:-325px; /* Set to half of width * * margin-top:-149px; /* Set to half of the height * * }

Analysis: Position:absolute; This is a must.

margin-left:-325px; /* Set to half of width * *
margin-top:-149px; /* Set to half of the height * *

This enables the center to be positioned

The effect is as follows