HTML移动端利用flex布局实现css图片垂直居中

这篇文章主要为大家详细介绍了HTML移动端利用flex布局实现css图片垂直居中，具有一定的参考价值，可以用来参考一下。

<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.baidu.com/img/1.png" style="" />
  </div>
</div>

注：关于HTML移动端利用flex布局实现css图片垂直居中的内容就先介绍到这里