兼容ie6，ie7，ff，opera，safari的水平垂直居中！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美的水平垂直居中！！--兼容ie6，ie7，ff，opera，safari的水平垂直居中</title>
<style media="screen" type="text/css">
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分兩套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以實現在ff，safari和opera下的垂直居中，但是對ie系列無效
holder的 position:relative;
holder div的 *position:absolute; top:50%; left:0;
.holder p的 position: relative; top:-50%;
通過控制絕對層的位置實現ie6，7下的垂直居中
holder div中的*position:absolute是只給ie6和7看的css hack
對於水平居中要說的是如果holder div的width如果未指明100%，在ie7中它是不會自動延伸100%的，也就無法實現水平居中
*/
</style>
</head>
<body>
<div class="wrapper">
<div class="holder">
<div><p><img src="<a href="http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png" target="_blank">http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png</a>" /></p></div>
</div>
<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">
以上的圖片垂直並且水平居中,您可以改變holder的height和width進行測試</div>
</div>
</body></html>
这个也是很简洁的 TABLE 版：
<table style="background-color: #ffc; width: 300px; height: 200px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div style="width: 80px; height: 60px; background-color: green; text-align: center;">
<span style="color: white;"><em>層絕對居中</em></span></div></td>
</tr>
</tbody>
</table>
暂无评论