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

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

感兴趣的小伙伴，下面一起跟随四海网的小编罗X来看看吧。
移动端一般浏览器版本都比较高，所以可以大胆的使用flex布局，（flex布局参考css3的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>
/***  来自四海网 （www.q1010.com）***/

html代码：html代码如下：

<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/baidu_jgylogo3.gif" style="" />
    </div>
</div>
<!--   来自 四海网 （www.q1010.com）-->

本文来自：http://www.q1010.com/175/2066-0.html

注：关于HTML移动端利用flex布局实现css图片垂直居中的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：图片居中