让div在屏幕上居中（水平居中+垂直居中）的方法总结

html代码如下：

    <div class="book">
            <div class="front-cover">
               
            </div>
    </div>

Css居中方法 （敲黑板）重点

• 首先将元素设置成为绝对定位，然后距顶部和左各50%，此时的元素还不是居中的，因此需要通过一定的偏移将其移到理想位置，两种方法的主要思想都是一样的，第一种通过margin-left和margin-top移动元素自身宽高的一半，另一种通过css3的属性transform的translate方法平移元素自身宽高的一半， 代码展示如下：
  ```css
  body {
  color: #ffffff;
  background: #444444;
  }

.book {

 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 /* 第一种 */
 /* 兼容性 未使用css3, ie678 */
 /* margin-left: -150px; */
 /* margin-top: -150px; */
 /*第二种*/
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

}
```

两种方法第一种的兼容性更加的好一些，因为其中没有使用Css3的属性 对于ie678的兼容比较友好