Three ways to center an element vertically and horizontally

The first method:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}

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

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

The second method Method:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

*This is the style in css3; Disadvantages: Poor compatibility, only supports IE9+ browsers

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

The third method

p.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

*Better compatibility, Disadvantage: Browsers below IE7 are not supported

The above are the content of the three methods to center an element vertically and horizontally. Please pay attention to more related content PHP Chinese website (www.php.cn)!