Html
    Css
    Js
* {
	padding:0;
	margin:0
}
html {
	min-height:101%
}
body {
	font-family:verdana,arial,tahoma;
	font-size:12px;
	color:#333
}
div {
	margin:0 auto
}
ul,ol,li {
	list-style:none
}
a {
	text-decoration:none;
	word-wrap:break-word
}
a:hover {
	text-decoration:underline
}
img {
	border:0
}
p {
	line-height:26px
}
/* 容器 */
.in-qq {
	width:850px;
	height:270px;
	border:1px solid #DDD;
	border-top:6px solid #333;
	margin:10px auto
}
.in-qq dt {
	height:40px;
	background:url(../images/i.png) no-repeat 0 -400px;
	position:relative
}
.in-qq dt a {
	float:right;
	margin:12px;
	color:#666
}
.in-qq dd {
	width:240px;
	height:190px;
	margin:12px 10px 10px 27px;
	float:left;
	display:inline
}
.in-qq dd i {
	width:13px;
	height:13px;
	background:url(../images/a.png) no-repeat -177px -40px;
	float:right;
	margin-top:-26px
}
.in-qq dd a {
	color:#666;
	border-bottom:4px solid #fff;
	line-height:30px;
	display:block
}
.in-qq dd a:hover {
	color:#390;
	border-bottom:4px solid #333;
	text-decoration:none
}
/* 未知大小的图片在已知容器中的垂直居中和水平居中 */
.in-qq dd img {
	margin-top:expression(100-this.height/2);
	max-height:160px
}
/* max-height可限制图片的最大高度 */
.in-qq dd p {
	width:238px;
	height:158px;
	border:1px solid #EEE;
	overflow:hidden;
	text-align:center;
	vertical-align:middle;
	display:table-cell
}
/* 未知大小的图片在已知容器中的垂直居中和水平居中 */

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS图片垂直居中和水平居中

0