<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平垂直居中div演示效果</title>
<style type="text/css">
.align-center{
/*
负边距+定位：水平垂直居中（Negative Margin）
使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，已到达水平垂直居中的效果。
*/
position:absolute;
left:50%;
top:50%;
width:400px;
height:400px;
margin-top:-200px;
margin-left:-200px;
border:1px dashed #333;
}
</style>
</head>
<body>
<div class="align-center">水平垂直居中div演示效果</div>
</body>
</html>
