CSS实现不定高度DIV绝对居中代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CSS实现不定高度DIV绝对居中

作者:Dezai.CN / 发布于2013/10/22/ 502


	一般来说，指定高度的DIV垂直和水平居中比较方便，而不定高度的话就稍微麻烦了点，我尝试了一下，通过2个辅助的DIV实现了绝对居中，兼容IE和FF等标准浏览器。

	CSS代码：


	#wrapper{ height:100%; width:100%; overflow:hidden; position:relative; }
	#wrapper[id]{ display:table; }
	#mid{ position:absolute; top:50%; left:50%; }
	#mid[id]{ display:table-cell; left:0; vertical-align:middle; position:static; }
	#box{ position:relative; top:-50%; left:-50%; z-index:9999; width:300px; }
	#box[id]{ left:0; margin:0 auto; }
	div.boxstyle{ border:2px solid #000000; text-align:center; padding:5px; }

	
	XHTML代码：


	<div id="wrapper">
	 <div id="mid">
	 <div id="box" class="boxstyle">
	 http://bolm.cn
	 DIV 绝对居中示例
	 </div>
	 </div>
	</div>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　DIV绝对居中　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)