1、将如下图像重构，要求在页面上水平垂直居中！分别用2个DIV，3个DIV，5个DIV实现！
　　这是个正的十字架，宽是50px；长是150px
　　我的方法主要是用相对定位和负值相结合，让它水平垂直居中！
 
2个DIV
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.heng{width:150px; height:50px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-25px; margin-left:-75px}
.shu{width:50px; height:150px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-75px; margin-left:-25px}
</style>
<title>应聘页面重构的两道面试题  </title>
</head>
<body>
<div class="heng"></div>
<div class="shu"></div>
</body>
</html>
 
3个DIV的实现方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.main{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px}
.heng{width:150px; height:50px; background:#F00; margin-top:50px;}
.shu{width:50px; height:150px; background:#F00; margin-left:50px; margin-top:-100px/*margin上边界叠加*/}
</style>
<title>应聘页面重构的两道面试题 </title>
</head>
<body>
<div class="main">
 <div class="heng"></div>
 <div class="shu"></div>
</div>
</body>
</html>
 
5个DIV
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.main2{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px; background:#FF0000}
.small{width:50px; height:50px; float:left }
.topLeft{background:#FFFF00;}
.topRight{background:#00FF00;  margin-left:50px}
.buttomLeft{background:#FF00FF; margin-top:50px}
.buttomRight{background:#00FFFF; margin-left:50px; margin-top:50px}
</style>
<title>应聘页面重构的两道面试题 - </title>
</head>
<body>
<div class="main2">
<div class="small topLeft"></div>
<div class="small topRight"></div>
<div class="small buttomLeft"></div>
<div class="small buttomRight"></div>
</div>
</body>
</html>
 
2、让该图形水平垂直居中于页面，要求满足最多用户！
　　（注：该图形是一个无限缩小的，就是四个角的正方形依次缩小，比如中间的是200px；第二个是100px；第三个是50px；依次下去。。。。而我只实现到第三层，因为我觉得剩下的方块实现原理都一样。不知道我理解错没有，还是说我方法错了！！！！）
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.center{width:200px; height:200px; top:50%; left:50%; position:absolute; margin:-100px 0 0 -100px; background:#FF0000}
.topLeft{ width:50%; height:50%; position:absolute; left:-50%; top:-50%; background:#FF0000}
.topRight{ width:50%; height:50%; position:absolute; right:-50%; top:-50%; background:#FF0000}
.buttomLeft{ width:50%; height:50%; position:absolute; left:-50%; bottom:-50%; background:#FF0000}
.buttomRight{ width:50%; height:50%; position:absolute; right:-50%; bottom:-50%; background:#FF0000}
</style>
<title>应聘页面重构的两道面试题</title>
</head>
<body>
<div class="center">
 <div class="topLeft">
     <div class="topLeft">
         <div class="topLeft"><div class="topLeft"><div class="topLeft"></div></div></div>
        </div>
    </div>
    <div class="topRight">
     <div class="topRight"><div class="topRight"><div class="topRight"><div class="topRight"></div></div></div></div>
    </div>
    <div class="buttomLeft">
     <div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"></div></div></div></div>
    </div>
    <div class="buttomRight">
     <div class="buttomRight"><div class="buttomRight"><div class="buttomRight"><div class="buttomRight"></div></div></div></div>
    </div>
</div>
</body>
</html>