Calerme/index.html

## index.html
<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>绝对定位实现自适应与居中</title>
    <style>
      #box {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        /** 上面的代码已经实现了 #box 的自适应
         *  如果要居中 #box 可以加上 width 与 height
         */
        width: 300px;
        height: 300px;
        margin: auto; // 必须，否则无法实现居中
        background: deepskyblue;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>
	<!doctype html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>绝对定位实现自适应与居中</title>
	<style>
	#box {
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	left: 8px;
	/** 上面的代码已经实现了 #box 的自适应
	* 如果要居中 #box 可以加上 width 与 height
	*/
	width: 300px;
	height: 300px;
	margin: auto; // 必须，否则无法实现居中
	background: deepskyblue;
	}
	</style>
	</head>
	<body>
	<div id="box"></div>
	</body>
	</html>