html5图片垂直居中

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>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码