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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
