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

前端之家收集整理的这篇文章主要介绍了HTML移动端利用flex布局实现css图片垂直居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
移动端一般浏览器版本都比较高,所以可以大胆的使用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>
/***  来自编程之家 jb51.cc (jb51.cc)***/
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>
<!--   来自 编程之家 jb51.cc (jb51.cc)-->
原文链接:https://www.f2er.com/html/527532.html

猜你在找的HTML相关文章