Posted By

bryanlyman on 12/11/09

Tagged

Versions (?)

Last Edited at 12/11/09 12:24pm

Statistics

Viewed 688 times

Favorited by 1 user(s)

Related snippets

Cross-Browser Auto Vertical/Horizontal Centering (Chrome & Forms Compatible)

/ Published in: CSS

A way to do 100% DIVs that adjust to content and center themselves both vertically and horizontally automatically. Tested for all browsers at 1920X1080 resolution. The 96% body height fixes Firefox and IE scrollbars that appear without reason and might need to be adjusted for smaller or larger windows.

Highlighted TextExpand

*: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%;left:-50%;}/*ie7*/
	* html #content{position:relative;top:-50%;left:-50%;}/*ie6*/

#page{height:100%;width:100%;}
</style>

</div>
       </div>
</div> 
</body>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.