css布局

• 两列布局

HTML

<div id="left">left</div>
<div id="content">content</div>

CSS

#left{
    float:left;
    width:220px;
}
#content{
    margin-left:220px;
}

• 左中右布局

css

 #content{
            height:300px;
        }
        .left{
            width: 200px;
            height:100%;
            float: left;
            background-color: #00a0dc;
        }
        .middle{
            height:100%;
            margin-left:200px;
            margin-right: 300px;
            background-color: red;
        }
        .right{
            height:100%;
            width: 300px;
            float: right;
            background-color: #00a0dc;
        }

HTML

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

• 水平居中

css

.center {
    width: 960px; margin-left: auto; margin-right: auto;
}

• 垂直居中

HTML

<main>
    <h1>12121</h1>
</main>

css

main{
    position:absolute;
    top:calc(50%-3em);
    left:calc(50%-9em);
    width:18em;
    height:6em;
}