实现一张图片水平垂直居中

第一种方式：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>

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

欢迎分享本文，转载请保留出处：前端ABC » 实现一张图片水平垂直居中