图片水平垂直居中

上一年面试的时候被问到的一道题目，很尴尬的是，大早上起来就去被问蒙了，居然一点答不上来，想想自己也是蠢啊，现在分享出来，一面小伙伴再次被坑。

第一种方式：display：table-cell

<div style = "width:600px;height:800px;display:table-cell;text-align: center;vertical-align: middle;">
<img src = "icon.png"/>
</div>

第二种方式：定位加translate

<div style = "width:600px;height:800px;border:1px solid #ccc;position: relative;">
<img style = "display: block;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);" src = "icon.png"/>
</div>

第三种方式： 弹性盒   display-box

<div style = "width:600px;height:800px;border:1px solid #ccc;display:-webkit-box;display:-moz-box;display:box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient:vertical;">
<img style = "" src = "icon.png"/>
</div>

第四种方式：新版弹性盒display:flex

<div style = "width:600px;height:800px;border:1px solid #ccc;display: flex;display: -webkit-flex;justify-content:center;align-items: center;">
<img style = "" src = "icon.png"/>
</div>

以上四种方式是自己琢磨的，亲测可用，图片地址换成自己的就可以了。欢迎补充，共同进步。