（1）偏移量解决
思路：
首先水平方向居中margin:0auto，不必多说
其次让居中元素脱离文档流，使它距离top50%,这样的结果就是元素本身的顶部到达盒子的中间
position:relative;//脱离文档流
top:50%;//设置top50%一半
最后：再把元素本身上移本身的一半就实现了垂直居中（为什么是一半的高度？因为刚刚偏移了50%顶部在中间，多移了元素本身高度的一半，所以再移回去本身高度的一半即可）
margin-top:-100px;//上缩一半
完整：
html<div class="box"><div class="item"></div></div>css:.box{height: 500px;width: 500px;background-color: #409eff;border: 1px solid;}.item{height: 200px;width: 200px;background-color: #999;margin: 0 auto;//水平方向居中position: relative;top: 50%;//设置top50%一半margin-top: -100px;//上缩一半}
（2）css3实现：
transform: translateY(-50%)；思路如上是使得div向上平移（translate）自身高度的一半(50%)
代码：
html<div class="box"><div class="item"></div></div>css:.box{height: 500px;width: 500px;background-color: #409eff;border: 1px solid;}.item{height: 200px;width: 200px;background-color: #999;margin: 0 auto;//水平方向居中position: relative;top: 50%;//设置top50%一半transform: translateY(-50%);//上缩一半}
（3）利用flex。(也是最简单的)
<div class="box"><div class="item"></div></div>.box {height: 500px;width: 500px;background-color: #409eff;border: 1px solid;display: flex;align-items: center; /*定义body的元素垂直居中*/justify-content: center; /*定义body的里的元素水平居中*/}.item {height: 200px;width: 200px;background-color: #999;}
