居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，下面我们来看一下使用css设置图片上下居中的方法。
css图片上下/垂直居中方法：
1、使用display:table与display:table-cell样式设置上下居中。
style="display: inline-block;"/>
效果图：
2、绝对定位：已知图片的高宽
style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%;
margin-left: -60px;margin-top: -20px;" />
效果图：
3、flex布局：h5端可用
.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="border: green solid 1px; width: 500px; height: 200px;">
效果图：
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
