css实现高度不定图片垂直居中

在开发中经常遇到需要将不定高度的图片垂直居中的情况，尤其电商网站，图片很多，宽高比例不一定。如果想要整齐地显示在网站上就需要将图片水平和垂直两个方向都居中对齐，水平方向对齐很好实现，那么垂直居中怎样实现呢？以下的方法是用css实现的，很简单：  html代码：

css代码：

.imgBox{margin:100pxauto;background:#040303;width:500px;height:500px;font-size:0;text-align: center;}.imgBoximg{margin:0auto;vertical-align: middle;width:300px;height:300px;}.imgBox:after{display: inline-block;width:0;height:100%;content:"center";vertical-align: middle;overflow: hidden;}

效果如下图所示，img标签不能设置display:block;否则会失效。ie8及以上是可以兼容的，ie7下无法实现。当然用js可以实现不定高度垂直居中，如果不需要兼容ie7的话用css是很方便的。

css实现高度不定图片垂直居中 | LIDADA

转载自LIDADA http://lidada.org/css-to-achieve-the-height-of-the-vertical-picture-vertical-center/

更多文章请关注LIDADA