通过css定位控制元素水平垂直居中。
原理：设置元素的绝对定位，让元素以屏幕左上角定位，设置top:50%;left:50%;距屏幕上和左各一半，此时显示如下:
只需要将元素的上外边距和左外边距移动自身宽度的一半即可实现水平垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>