不确定宽高的元素在容器中垂直居中的方法总结

实现图片在容器中垂直水平居中

 html结构

<div class="photo">
<img src="images/dd.jpg">
</div>

方法一：绝对定位

.photo{overflow: hidden;position: relative;width: 100%;height: 500px;background: #ccc; }
.photo img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

重点在transform: translate(-50%,-50%);

不兼容不支持transform的浏览器

方法二：绝对定位

.photo{overflow: hidden;position: relative;width: 100%;height: 500px;background: #ccc; }
.photo img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

方法三:table-cell

.photo{width: 1000px;height: 500px;background: #ccc; display: table-cell;text-align: center;vertical-align: middle;}