居中的又一方法：flex

css文档：

body,html{
    height:100%;
    width:100%;
}
.testflex{
    height:100%;
    width:100%;
    background-color: gray;
    justify-content:center;
    align-items:center;
    display:-webkit-flex;
}
.testflex1_1{
    height:10%;
    width:10%;
    background-color: blue;
}

html:

<div class="testflex">
    <div class="testflex1_1"></div>
</div>

简单代码即可实现垂直和水平完美居中。

flex详细教程参见阮一峰大神博客：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?20170330153525#comment-last