CSS中未知高度水平垂直居中实例

作者：简简单单 2013-09-30

提示：您可以先修改部分代码再运行

<!DOCTYPE html>




<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		
		
		<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
* {padding:0;margin:0;}
#tnnd{border:1px solid red;margin:0 auto;font-size:12px;line-height:1.8;}
/* 高级浏览器用 table-cell */
#infoBox{text-align:center; margin: 200px; background: #ccc; display:table;}
#info{display:table-cell;vertical-align:middle;}

/*专为 IE6/7 写的*/
.ie6 #infoBox,
.ie7 #infoBox{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}

.ie6 #info,
.ie7 #info{position:relative;top:-50%;text-align:center;}

</style>
	</head>
	<body>
		<div id="infoBox">
    		<div id="info">
		        <div id="tnnd">
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		            关于 CSS 的未知高度水平垂直居中问题<br />
		        </div>
		    </div>
		</div>
	</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

CSS中未知高度水平垂直居中实例

相关文章

精彩推荐