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

#CSS2 2008-08-21

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

<!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>