面试已经被问了好几遍这个问题了，以为自己看了文字描述觉得挺简单的，但是，，，事实是总也记不住，还是自己敲一遍代码吧。
首先html结构如下图所示：
方式主要有以下几种：（显示效果放在最后了）
1、利用flex布局：justify-content：center使flex-item在主轴方向上居中，align-items：center使item在交叉轴方向上居中。
具体flex的其他属性值可参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。
2、利用table布局（下图中蓝色背景为内层的table-cell）：
1）外层设置display:table
2）内层设置display:table-cell
3）内层设置vertical-align：middle可使table-cell的内容垂直居中，margin:auto使水平居中。
（其中，margin:auto可以实现居中，若一侧为定值，一侧为auto，则auto为剩余空间的大小；若两侧都为auto，则平分剩余空间）
3、利用负position:absolute和 负margin：
1）设置div的position:absolute
2）向右向下移动50%浏览器的宽度（注意，此时移动到屏幕中心的位置是div的左上角）left:50%;top:50%
3）所以再把div向上向左分别移动div本身高度和宽度的一半长度。margin-left:-100px;margin-top:-100px;
4、在3的基础上将负margin改为利用transform(-50%,-50%)实现移动。（其中，参数是自己宽高的50%）
