html中移动端的图片怎么居中,HTML移动端利用flex布局实现css图片垂直居中

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

感兴趣的小伙伴，下面一起跟随512笔记的小编罗X来看看吧。

移动端一般浏览器版本都比较高，所以可以大胆的使用flex布局，(flex布局参考css3的flex布局用法)演示代码如下：

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

}

/*** 来自512笔记 (www.512pic.com)***/html代码：html代码如下：

   

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

关键词：图片居中