不確定寬高的元素在容器中垂直居中的方法總結

實現圖片在容器中垂直水平居中

 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;}