关键点是: 使用 vertical-align:middle
小技巧: 使用 span, 将 span 的 diaplay:inline-block, 高度与父元素同高 100%, 元素设置 vertical-align:middle
代码片段 1
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 未知尺寸图片垂直水平居中 </title>
- <style>
- .box{width: 600px;height: 400px;border: 1px solid red;text-align: center;}
- span{height: 100%;display: inline-block;vertical-align: middle;}
- img{vertical-align: middle;}
- </style>
- </head>
- <body>
- <div class="box">
- <img src="http://www.w3cfuns.com/data/attachment/album/201501/27/174048jwe5dhj6jh18w3l3.jpg.thumb.jpg" alt=""><span></span>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/12377/53b8451e67eab85985940da74bf43c77.html