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

第一种方式: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 » 实现一张图片水平垂直居中

赞 (2)
分享到:更多 ()

发表评论 0