Three ways to align an element vertically horizontally

The first method:

div.box{

weight:200px;

height:400px;

<!--change elements to positioning elements--

Position:absolute;

<!--set the position of the element, both the upper and the left are 50%-->

left:50%;

top:50%;

<!--set the left margin of the element, the top margin is a negative 1/2--> with a wide height

margin-left:-100px;

margin-top:-200px;

}

* Good compatibility; Disadvantage: Must know the width of the element

-------------

The second method:

div.box{

weight:200px;

height:400px;

<!--change elements to positioning elements--

Position:absolute;

<!--set the position of the element, both the upper and the left are 50%-->

left:50%;

top:50%;

<!--The offset of the set element relative to itself is negative 50% (that is, half the size of the element itself)--

Transform:translate ( -50%,-50%);

}

* This is the style of the CSS3; disadvantage: Compatibility is not good, only support Ie9+ browser

---------------

The third method of

div.box{

weight:200px;

height:400px;

<!--change elements to positioning elements--

Position:absolute;

<!--set the position of the element, from the top, bottom, left, and right are 0-->

left:0;

right:0;

top:0;

bottom:0;

<!--set the margin style value of the element to auto-->

Margin:auto;

}

* Compatibility is good, disadvantage: not support IE7 below browser

Three ways to align an element vertically horizontally