html5图片居中:主要的思路是用table或者table-cell,还有一种不太了解,贴在最后。
一:显式使用table标签
这是只需要定义内容的CSS样式为table-cell的,并垂直居中。
<style> html { height:100%; } body { /*background-color:#FFFFFF;*/ margin:0; /*height:100%;*/ background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center; background-position:center; background-size:100%; } /* 这里用span或者img都可以 */ #box span{ display:table-cell; vertical-align:middle; } </style>
<!doctype html> <html> <body> <div id="box"> <table width="100%" height="100%"> <tr> <td align="center"> <img src="${imgPath}" width="10" /> </td> </tr> </table> </div> </body> </html>
二:隐式定义div的table显示
<style> html { height:100%; } body { /*background-color:#FFFFFF;*/ margin:0; /*height:100%;*/ background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center; background-position:center; background-size:100%; } /* 隐式指定显示类型为table */ #box{ width:100%;height:100%; display:table; text-align:center; /*background-color: #00FF00;*/ } /* 这里要定义内标签span的居中 */ #box span{ display:table-cell; vertical-align:middle; } </style>
<!doctype html> <html> <body> <div id="box"> <span><img src="${imgPath}" width="100" /></span> </div> </body> </html>
三:不使用table系列
<style> html { height:100%; } body { /*background-color:#FFFFFF;*/ margin:0; /*height:100%;*/ background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center; background-position:center; background-size:100%; } div{ width:100%;height:100%; text-align:center; } div span{ height:100%;width:0; overflow:hidden; display:inline-block; vertical-align:middle; } img{ vertical-align:middle; } </style>
<!doctype html> <html> <body> <div id="test"> <img src="${imgPath}" width="100"/> <span></span> </div> </body> </html>