这篇文章主要为大家详细介绍了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笔记的其他信息。
关键词:图片居中