css如何使图片上下居中？

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，下面我们来看一下使用css设置图片上下居中的方法。

css图片上下/垂直居中方法：

1、使用display:table与display:table-cell样式设置上下居中。

<div style="text-align: center; width: 500px;height:200px; 
display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
    <img alt=""src="https://www.html.cn/static/images/logo.webp"
    style="display: inline-block;"/>
    </span>
</div>

效果图：

2、绝对定位：已知图片的高宽

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
   <img alt="" src="https://www.html.cn/static/images/logo.webp"
     style="width: 120px; height: 40px;position: absolute; left:50 top: 50
     margin-left: -60px;margin-top: -20px;" />
      </div>

效果图：

3、flex布局：h5端可用

<style type="text/css">
    .ui-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
        box-sizing: border-box
    }

    .ui-flex.justify-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .ui-flex.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
</style>

<div class="ui-flex justify-center center" 
style="border: green solid 1px; width: 500px; height: 200px;">
    <div class="cell">
    <img alt="" src="https://www.html.cn/static/images/logo.webp" style="" />
    </div>
</div>

效果图：