一。先上一个 不随相应 垂直居中的， 下面是 一个 宽度，是可以垂直居中的，，但是， 不相应。
、
<!doctype html> <html style="font-size:15px;"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <title>v</title> <style type="text/css"> body,html{ height:100%; width:100%;} .box{ display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle; } .box img{ vertical-align:middle; margin:0; padding:0; max-width:50%; } .al{ height:50%;} </style> </head> <body> <div class="box"> <img src="appLoad.png" > </div> <div class="al"> 555 </div> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: "Microsoft YaHei"; -webkit-text-size-adjust: none; } h3 { margin: 0; padding: 0; } a, button, input, textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plaintext-only; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { -webkit-touch-callout: none; } html, body { width: 100%; height: 100%; } #box{ width:100%;height:400px; display:table; text-align:center; border:1px solid #d3d3d3; background:#fff; } #box span{ display:table-cell; vertical-align:middle; } #box img{ border:1px solid #ccc; } </style> <!--[if lte IE 7]> <style type="text/css">? #box{ position:relative; overflow:hidden; } #box span{ position:absolute; left:50%;top:50%; } #box img{ position:relative; left:-50%;top:-50%; } </style> <![endif]--> </head> <body> <div style="position:absolute"> <div id="box"> <span><img src="file:///D|/now-h5/jvWeb/source/static/download/images/appLoad.png" style="max-50%"></span> </div> </div> </body> </html>
最后我解决的办法。
用 这个盒子的背景 用一个属性 background-position:center， 不管这个盒子 高度 和宽度，多少，都 可以 垂直居中。
第二方法。 可以随 相应式，的， 可以
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title> <style type="text/css"> body { height:100%; width:100%; } #box{ width:100%;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box p{ width:100%;height:400px; line-height:400px; /* 行高等于高度 */ } /* 兼容标准浏览器 */ #box p:before{ content:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */ margin-left:-5px; font-size:10px; /* 修复居中的小BUG */ visibility:hidden; /*设置成隐藏元素*/ } #box p img{ *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc; background-position:center } </style> </head> <body> <div id="box"> <p><img src="images/appLoad.png" style="max-50%"></p> </div> </body> </html>