CSS 跨浏览器自动垂直/水平居中（Chrome和表格兼容）

Posted

tags:

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

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

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

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

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

使用CSS垂直和水平对齐（中间和中心）[重复]

垂直水平居中

怎么使用CSS让图片水平垂直都居中？

CSS的水平居中与垂直居中