实现图片在容器中垂直水平居中
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;}