1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>未知高度的图片垂直居中</title>
6 <meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563">
7 <style>
8 div{ width: 500px;height: 500px;border: 1px solid #000;display: table;text-align: center;overflow:hidden; }
9 span{ display: table-cell;vertical-align: middle; }
10 </style>
11 <!--[if lte IE 7]>
12 <style>
13 div{ position:relative;overflow:hidden; }
14 span{ position:absolute;left:50%;top:50%; }
15 img{ position:relative;left:-50%;top:-50%; }
16 </style>
17 <![endif]-->
18 </head>
19 <body>
20 <div>
21 <span>
22 <img src="1.jpg" alt="">
23 </span>
24 </div>
25 </body>
26 </html>
查看代码
时间： 2024-10-06 06:22:07