tonyc726/图片垂直居中.html

## 图片垂直居中.html
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>图片垂直居中demo</title>
</head>
<style>
	/*全局样式*/
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
	body, button, input, select, textarea { font: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
	ul { list-style: none; }
	img { border: none; }
	/*清除浮动样式*/
	.clear-fix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }
	.clear-fix: { zoom: 1; }
	.box { width: 800px; margin: 100px auto; }
	.pic-wrap {
		width: 220px;
		height: 220px;
		border: 1px solid #F00;
		/*标准浏览器模拟表格居中*/
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		/*防止由字体及行高把容器撑大*/
		font-size: 0;
		line-height: 1;
		*display: block;
		+line-height: 220px;
		_font-size: 192px; /* 字体大小等于height/1.14 */
		_font-family: sans-serif;
	}
	.pic-wrap img {
		display: inline; /*图片必须为行内元素*/
		vertical-align: middle;
	}
</style>
<body>
	<div class="box">
		<a href="" class="pic-wrap" target="_blank">
		<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="来源xxx" title="来源xxx">
		</a>
	</div>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>图片垂直居中demo</title>
	</head>
	<style>
	/全局样式/
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
	body, button, input, select, textarea { font: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
	ul { list-style: none; }
	img { border: none; }
	/清除浮动样式/
	.clear-fix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }
	.clear-fix: { zoom: 1; }
	.box { width: 800px; margin: 100px auto; }
	.pic-wrap {
	width: 220px;
	height: 220px;
	border: 1px solid #F00;
	/标准浏览器模拟表格居中/
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	/防止由字体及行高把容器撑大/
	font-size: 0;
	line-height: 1;
	*display: block;
	+line-height: 220px;
	_font-size: 192px; /* 字体大小等于height/1.14 */
	_font-family: sans-serif;
	}
	.pic-wrap img {
	display: inline; /图片必须为行内元素/
	vertical-align: middle;
	}
	</style>
	<body>
	<div class="box">
	<a href="" class="pic-wrap" target="_blank">
	<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="来源xxx" title="来源xxx">
	</a>
	</div>
	</body>
	</html>