CSS 通过CSS实现绝对水平和垂直居中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 通过CSS实现绝对水平和垂直居中相关的知识，希望对你有一定的参考价值。

<body>

   <div id="distance"></div>
   <div id="content">
      <!-- absolutely centered content -->
   </div>

</body>


html, body {
	height: 100%;         /* required */
}
body {
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
}
div#distance { 
	margin-bottom: -10em; /* half of content height */
	background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */

}
div#content {
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 20em;         /* required - desired height */
	width: 40em;          /* required - desired width */
	background: blue;     /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
}

以上是关于CSS 通过CSS实现绝对水平和垂直居中的主要内容，如果未能解决你的问题，请参考以下文章

css绝对定位如何水平居中？

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术（转）

绝对定位元素水平居中和垂直居中的原理

CSS实现垂直居中的7种方法

css实现块级元素水平垂直居中的方法？

垂直水平居中