html5怎么让图片上下居中显示,css如何使图片上下居中？

居中是我们使用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;">

效果图：