使用重构的方式制作出一个红色十字架@慕课网原创_慕课网

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用2个div完成</title>
        <style type="text/css">
            #heng,#shu{
            left:50%;
            top:50%;
            position:absolute;
            background-color:#f00;
            }
            #shu{
            width:50px;
            height:150px;
            margin-left:-25px;
            margin-top:-75px;
            }
            #heng{
            width:150px;
            height:50px;
            margin-left:-75px;
            margin-top:-25px;
            background-color:#f00;
            }
        </style>
    </head>
    <body>
            <div id="heng"></div>
            <div id="shu"></div>
    </body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用3个DIV完成</title>
        <style type="text/css">
        .main{
             width:150px;
             height:150px;
             top:50%;
             left:50%;
             position:absolute;
             margin:-75px 0 0 -75px;
             border:2px #F00 solid;
             }
        .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>
    </head>
    <body>
        <div class="main">
            <div class="heng"></div>
            <div class="shu"></div>
        </div>
    </body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用5个DIV完成</title>
        <style type="text/css">
            #top,
            #middle,
            #left,
            #right,
            #bottom{
                height:50px;
                width:50px;
                position:absolute;
                top:50%;
                left:50%;
                }
            #top{
                margin:-75px 0 0 -25px;
                background:#F00;
                }
            #middle{
                margin:-25px 0 0 -25px;
                background:#000;
                }
            #left{
                margin:-25px 0 0 -75px;
                background:#00F;
            }
            #right{
                margin:-25px 0 0 25px;
                background:#0F0;
            }
            #bottom{
                margin:25px 0 0 -25px;
                background:#FF0;
            }
        </style>
    </head>
    <body>
            <div id="top"></div>
            <div id="middle"></div>
            <div id="left"></div>
            <div id="right"></div>
            <div id="bottom"></div>
    </body>
</html>