图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）
Posted on 2013-06-26 14:06 人生梦想起飞 阅读(1875) 评论(0) 编辑 收藏 举报<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）</title>
<style media="screen" type="text/css">
.boxout{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; float:left;}
.boxin{display:table-cell; vertical-align:middle; text-align:center;}
/*for IE*/
.boxout{*position:relative;}
.boxin{*width:100%;*position:absolute; *top:50%; *left:0;}
.boxout p{*position: relative; *top:-50%; *margin:0; *padding:0;}
.boxout img{ *margin-top:2px;}/*for IE 图片4像素空白bag*/
</style>
</head>
<body>
<div class="boxout">
<div class="boxin"><p><img src="http://hiphotos.baidu.com/howlking/pic/item/ddab4a2328628c4e9822eda5.jpg" /></p></div>
</div>
</body>
