本文仅仅介绍作者认为的三种不错的方式，
方式一：transform: translate(-50%,-50%)
示例代码如下：
.div{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: red;
}
主要利用css3的： transform: translate(-50%,-50%)
优点：灵活，无需知道该div的高宽。
缺点：是CSS3新特性，所以兼容性会有问题。不兼容 ie8- （ 必须带上浏览器厂商的前缀才能兼容到ie9+）
方式二：margin-left和margin-top设为其高宽的一半的负值
示例代码如下：
div{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
优点：基本无任何兼容性问题
缺点：有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。
方式三：margin:auto实现绝对定位元素的居中
示例代码如下：
.div{
width: 600px;
height: 400px;
position: absolute; left:; top:; right:; bottom:;
margin: auto; /* 有了这个就自动居中了 */
}
代码两个关键点：
- 上下左右均
0位置定位； margin: auto
上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。
宽高如果任意一个没有设置，则默认就是100%，即：“上下左右多个等于0”的结果，
如果不设置父级，则默认是相对于body居中，即居中显示于整个页面；
优点：①基本无任何兼容性问题，
②像图片这种自身包含尺寸的元素，可以不设置高宽吧？（待确认）
缺点：①大多数时候仍然需要知道高宽，当元素高度可能变化的时候，就会比较麻烦，
②父级也需要有明确的高宽，才能相对父级居中定位，
方式三中，可能有人会问，为何margin: auto;会让绝对定位元素居中了呢？原因如下：（参考张鑫旭大大的文章：原地址）
