Center DIV with Dynamic Height

Submitted by:Jimmy Kerson

Date added:11 February, 2011

Category:CSS

Center DIV with Dynamic Height

Tags: css snippet , dynamic height , css div

Code Snippet:

/*CSS:*/
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}

/*HTML:*/
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
 
 

Comments