图像垂直居中

Posted 2021-02-22

I can't remember if this code is updated for IE7, if it is then it should be working in at least IE6-7, Safari 2-3, Opera 8 and Firefox 2-3.

Obviously the image_iefix is just for IE6.

/* Image Centering: Cross-Browser, vertical and horizontal image centering
----------------------------------------------------------------------------*/
 
/* Example markup:
<div class="image"><div class="image_align"><img src="yourimage.jpg" alt=""></div></div>
*/
 
.image {
	overflow: hidden;
	position: relative;
}
 
.image[class] {
	display: table;
	position: static;
}
 
.image_align[class] {
	display: table-cell;
	position: static;
	vertical-align: middle;
}
 
.image img { margin: auto; }
 
* html .image_iefix {
	position: relative;
	top: -50%;
}
 
* html .image_align {
	position: absolute;
	top: 50%;
}