在前端弄水平居中好容易，如果是块状元素，直接使用：margin:0 auto;行间元素只需在父元素中用：text-align:center;但要实现垂直居中就不是很么容易了，下面分4种情况来设置：

1. 宽、高确定值的时候，可以先绝对定位，左、顶50%，再用margin-left，margin-top分别设宽高的负一半就行，另外也可以不用绝对定位，用视口VH，但这种居中只是相对视口，有一定要的局限性：
   
   position: absolute; left:50%; top:50%; width: 200px; height: 200px; margin-left:-100px; margin-top:-100px; /*用视口VH的方法*/ width: 200px; height: 200px; margin:calc(50vh - 100px) auto; /*用视口VH的另一个方法*/ margin:50VH auto; transform:translateY(-50%);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   position: absolute; left:50%; top:50%; width: 200px; height: 200px; margin-left:-100px; margin-top:-100px; /*用视口VH的方法*/ width: 200px; height: 200px; margin:calc(50vh - 100px) auto; /*用视口VH的另一个方法*/ margin:50VH auto; transform:translateY(-50%);

2. 上面这种方法可以用一个calc函数来处理，这样更加DRY，注意+、-之间要加上空格：
   
   position: absolute; width: 200px; height: 200px; left:calc(50% - 100px); top:calc(50% - 100px);

   1 2 3 4 5

   position: absolute; width: 200px; height: 200px; left:calc(50% - 100px); top:calc(50% - 100px);

3. 如果宽高都是不确定的时候，但高度不超过屏高度时，可以用：translate()
   
   position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);

   1 2 3 4

   position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);

4. 如果浏览器都支援flex伸缩盒的话，用flex会简单好多，只需要在父元素上加上：display:flex，并指定高度就行
   
   body {display:flex;height:100vh} div{ margin:auto; }

   1 2 3 4

   body {display:flex;height:100vh} div{   margin:auto; }

总结：

在实际项目中，其实可以不考虑元素的宽高，要垂直居中直接用第三种方法就行，最简便的写法就是使用伸缩盒，未来应该都会支持了吧。这个垂直居中很常用，但目前还没有一个属性来直接达到效果，相信以后的CSS版本中会有一个属性直接做到吧。就像水平居中一样，一句搞掂。文章页中的顶部大图用的就是第三种居中。