问题方式N多，试验了3种
1.两个div
2.三个div
3.五个div
于是深刻理解margin上下左右的移动，为嘛50%了后还要移动及移动的规律，占他本身的二分之一大小。
1.两个div
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>十字架</title>
<style type="text/css">
.shu,.heng{ left:50%; top:50%; position:absolute; background:#f00;}
.shu{ width:50px; height:150px; margin-top:-75px; margin-left:-25px;}
.heng{ width:150px; height:50px; margin-left:-75px;margin-top:-25px;}
</style>
</head>
<body>
<div class="shu"></div>
<div class="heng"></div>
</body>
</html>
2.三个div
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>十字架</title>
<style type="text/css">
.main{ height:150px; width:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 -75px;border:2px solid #f00;}
.heng{ width:150px; margin-top:50px; height:50px; background:#f00;}
.shu{ width:50px; height:150px; margin-left:50px; background:#f00;margin-top:-100px;}
</style>
</head>
<body>
<div class="main">
<div class="heng"></div>
<div class="shu"></div>
</div>
</body>
</html>
3.五个div
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>十字架</title>
<style type="text/css">
.right,.left,.top,.bottom,.middle{ width:50px; height:50px; left:50%;top:50%; background:#f00; position:absolute;}
.right{margin:-25px 0 0 25px;background:#0f0;}
.left{margin:-25px 0 0 -75px;background:#00f;}
.top{margin:-75px 0 0 -25px; background:#f00;}
.middle{margin:-25px 0 0 -25px;background:#000;}
.bottom{margin:25px 0 0 -25px;background:#ff0;}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
