用CSS3使图片在容器内垂直水平居中

2016年3月5日02:45:30 更新 一个很好的css属性：object-fit:cover 设置好宽度和高度，图片会自动居中显示，占满宽度和高度并且不变形~

在电脑chrome和苹果上显示正常，但是安卓4.4好像有些问题~

---

经常会用到图片缩略图要居中显示，不然要么自适应宽度，要么自适应高度。

遇到宽度比较大的，自适应后高度可能有空白。

用max-width的方法不太好用。

网上很多用jquery实现图片居中的略麻烦，这里用css3来解决这个问题。同样可以用到div的水平垂直居中，在一些遮罩层经常用到！

div容器的css样式

width: 80px; height: 80px; overflow: hidden;

img标签的css样式

width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

实例：最终效果图