一、首先在style中定义一个类，名字自己起

<style>
.div-in-center {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
</style>

说明一下：
1、top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2、transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
3、-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
代表的是支持不同的浏览器，这个可以自行查阅。

二、引用这个类

<div class="div-in-center"></div>

至于效果，直接用我做的页面举例如下

更多推荐

如何使一个div块在网页居中（正中间）