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

Revision: 21392

at May 21, 2010 16:02 by bryanlyman

Updated Code

<style type="text/css">	
        html,body,form {height:100%;margin:0px;padding:0px;}
	html{height:100%;}
	body{height:96%;text-align:center;}/*height 96% fixes scrollbar problems*/
					   /*remove text-align for left justification*/
	form{display:block;}/*chrome & forms*/
	#page{display:table;overflow:hidden;margin:0px auto;padding:0px;min-height:100%;}

	*: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>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21391

at May 21, 2010 15:57 by bryanlyman

Updated Code

<style type="text/css">	
        html,body,form {height:100%;margin:0px;padding:0px;}
	html{height:100%;}
	body{height:96%;text-align:center;} /*height 96% fixes scrollbar problems*/
					    /*remove text-align for left justification*/
	form{display:block;} /*chrome & forms*/
	#page{display:table;overflow:hidden;margin:0px auto;min-height:100%;}

	*: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%;margin:0px;padding:0px;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21390

at May 19, 2010 11:52 by bryanlyman

Updated Code

<style type="text/css">	
        form{display:block;height:100%;}/*chrome & forms*/
	#page{display:table;overflow:hidden;margin:0px auto;min-height:98%;}
	*: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*/

	/*remove text-align:center for left-justified*/
	html,body{height:98%;text-align:center;} 
	#page{height:100%;width:96%;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21389

at May 19, 2010 11:51 by bryanlyman

Updated Code

<style type="text/css">	
        form{display:block;height:100%;}/*chrome*/
	#page{display:table;overflow:hidden;margin:0px auto;min-height:98%;}
	*: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*/

	/*remove text-align:center for left-justified*/
	html,body{height:98%;text-align:center;} 
	#page{height:100%;width:96%;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21388

at May 19, 2010 10:58 by bryanlyman

Updated Code

<style type="text/css">	
        form{display:block;height:100%;}/*chrome*/
	#page{display:table;overflow:hidden;margin:0px auto;min-height:98%;}
	*: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:98%;text-align:center;}
	#page{height:100%;width:96%;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21387

at May 12, 2010 17:36 by bryanlyman

Updated Code

<style type="text/css">	
        form{display:block;height:100%;}/*chrome*/
	#page{display:table;overflow:hidden;margin:0px auto;min-height:98%;}
	*: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:98%;}
	#page{height:100%;width:96%;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Revision: 21386

at December 11, 2009 12:24 by bryanlyman

Initial Code

<style type="text/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;}
</style>

<body>
<div id="page">
       <div id="content_container">
               <div id="content">

<!-- centered content here -->

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

Initial URL

Initial Description

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.

Initial Title

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

Initial Tags

ie, browser, center

Initial Language

CSS

Choose a language for easy browsing: