跨浏览器自动垂直/水平居中（与Chrome和Forms兼容）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨浏览器自动垂直/水平居中（与Chrome和Forms兼容）相关的知识，希望对你有一定的参考价值。

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.
  1. <style type="text/css">	
  2.         html,body,form {height:100%;margin:0px;padding:0px;}
  3. 	html{height:100%;}
  4. 	body{height:96%;text-align:center;}/*height 96% fixes scrollbar problems*/
  5. 					   /*remove text-align for left justification*/
  6. 	form{display:block;}/*chrome & forms*/
  7. 	#page{display:table;overflow:hidden;margin:0px auto;padding:0px;min-height:100%;}
  8.  
  9. 	*:first-child+html #page {position:relative;}/*ie7*/
  10. 	* html #page{position:relative;}/*ie6*/
  11.  
  12. 	#content_container{display:table-cell;vertical-align: middle;}
  13. 	*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
  14. 	* html #content_container{position:absolute;top:50%;}/*ie6*/
  15.  
  16. 	*:first-child+html #content{position:relative;top:-50%;left:-50%;}/*ie7*/
  17. 	* html #content{position:relative;top:-50%;left:-50%;}/*ie6*/
  18.  
  19. 	#page{height:100%;width:100%;}
  20. </style>
  21.  
  22. <body>
  23. <div id="page">
  24.        <div id="content_container">
  25.                <div id="content">
  26.  
  27. <!-- centered content here -->
  28.  
  29. 		</div>
  30.        </div>
  31. </div> 
  32. </body>

以上是关于跨浏览器自动垂直/水平居中（与Chrome和Forms兼容）的主要内容，如果未能解决你的问题，请参考以下文章

CSS的水平居中与垂直居中

在 CSS 中以圆形垂直和水平居中文本（如 iphone 通知徽章）

垂直水平居中

在水平堆栈视图（自动布局）中将文本与图像垂直居中 - iOS

URL到页面加载；css3动画与js动画；水平垂直居中

使用 CSS 跨浏览器 div 居中对齐