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

从网上收集的适用于”未知尺寸图层的垂直居中”方法。

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<style type="text/css">
.box {
     display: table-cell;
     vertical-align:middle;
     width:200px;
     height:200px;
     text-align:center;
     border: 1px solid #eee;
}
.box img {
     vertical-align:middle;
}
</style>
</head>
 <body>
<div class="box">
     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
 </body>
 </html>

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