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;
}
Reprinted from: http://www.cnblogs.com/linsinan/p/6132241.html
Three ways to center an element vertically horizontally "go"