未知大小图片在已知容器中居中

未知大小图片在已知容器中居中
作者：Neoxone 发表时间： 2008年08月21号，星期四阅读：10,330 次

以下是一些从网上收集来的各种适用于”未知尺寸图层的垂直居中”方法

<!DOCTYPE html>
<html>
<head>
<style>
.box {
 border:1px solid #666666;
 font-size:12px;
 width:600px;
 height:200px;
 line-height:200px;
 overflow:hidden;
 text-align:center;
}
* html .box {
 font-size:180px;
}
* > html body .box {
 font-size:180px;
}
* > html body .box img {
 margin:-35px 0pt 0pt;
}
img {
 vertical-align:middle;
}
</style>
</head>
<body>
<div class="box">
  <img src="http://www.baidu.com/img/baidu_logo.gif" style="border:1px solid black;">
</div>
</body>
</html>

（不知margin值，和font-size值如何计算）

[扩展]增加文字同时居中

<!DOCTYPE html>
<html>
<head>
<style>
.box {
border:1px solid #666666;
font-size:12px;
width:400px;
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
}
* html .box {
font-size:180px;
}
* > html body .box {
font-size:180px;
}
* > html body .box img {
margin:-35px 0pt 0pt;
}
img {
vertical-align:middle;
}
.wrap a{
font-size:12px;
vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
  <div class="wrap"><img src="http://www.baidu.com/img/baidu_logo.gif" style="border:1px solid black;"><a href="#">asadasdas</a></div>
</div>
</body>
</html>

（文字的垂直居中方法：line-height设置与height一样高.但只针对单行文字。）

来自Taobao UED的方法（垂直均为近似居中）

<style type="text/css">
.box {
     display: table-cell;
     vertical-align:middle;
     width:200px;
     height:200px;
     text-align:center;
     /* hack for ie */
     *font-size: 175px;
     /* end */
     border: 1px solid #eee;
}
.box img {
     vertical-align:middle;
}
</style>
<div class="box">
     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

(高度/字体大小的比值为1.14左右时IE可实现垂直居中)

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
 <style type="text/css">
<!--
 * {margin:0;padding:0}
div {
   width:500px;
   height:500px;
   border:1px solid #666;
   overflow:hidden;
   position:relative;
   display:table-cell;
   text-align:center;
   vertical-align:middle
 }
div p {
  position:static;
 +position:absolute;
   top:50%
 }
img {
   position:static;
+position:relative;
  top:-50%;
  left:-50%;
  }
 </style>
</head>
 <body>
       <div>
          <p><img src="http://www.google.com/intl/en/images/logo.gif" /></p>
       </div>
 </body>
 </html>

标签：居中