hacke2/center.html

## center.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .outer {
    display: table;
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
    text-align: center;
    *position: relative;
  }
  .inner {
    display: table-cell;
    vertical-align: middle;
    *position: absolute;
    *top: 50%;
  }
  .inner div {
    height: 50px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    *display: block;
    background: #ccc;
    *position: relative;
    *top: -50%;
    *left: -50%;
  }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">
      <div>垂直水平居中</div>
    </div>
  </div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.outer {
	display: table;
	width: 500px;
	height: 300px;
	border: 1px solid #ccc;
	margin: 0 auto;
	text-align: center;
	*position: relative;
	}
	.inner {
	display: table-cell;
	vertical-align: middle;
	*position: absolute;
	*top: 50%;
	}
	.inner div {
	height: 50px;
	width: 100px;
	display: inline-block;
	overflow: hidden;
	*display: block;
	background: #ccc;
	*position: relative;
	*top: -50%;
	*left: -50%;
	}
	</style>
	</head>
	<body>
	<div class="outer">
	<div class="inner">
	<div>垂直水平居中</div>
	</div>
	</div>
	</body>
	</html>