css布局【实用】

左右布局

/* 注释以下全是重点  */
.bigBox::after{
    /* 清除浮动【重点】 */
    content:'';
    display: block;
    clear:both;
}
.box1{
    width: 50%;
    background: palegreen;
    /* 【重点】 */
    float: left;
}
.box2{
    width: 50%;
    background: paleturquoise;
    /* 【重点】 */
    float: left;
}

<div class="bigBox">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

左中右布局【 flex 】

两版固定宽度 中间自适应 全部自适应 宽度可以都写成 flex: 1; （数值自行调整）

.box{
    height:50px;
    /* 【重点】 */
    display: flex
}
.left{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}
.center{
    background-color: yellowgreen;
    /* 【重点】 */
    flex: 1;
}
.right{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}

<div class='box'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
</div>

水平居中

.box{
    width: 200px;
    height: 200px;
    background: aquamarine;
    /* 【重点】 */
    margin: 0 auto;
}

<div class="box">box</div>

以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样

水平、垂直居中【 translate 】

.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="box">
    <span>123</span>
</div>

水平、垂直居中【 减 margin】

*{
    padding:0;
    margin: 0;
}
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -50px;
}

<div class="box">
    <span>123</span>
</div>

水平、垂直居中【 flexBox 】

.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    display: flex;
    justify-content: center;
    align-items:center;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
}

<div class="box">
    <span>123</span>
</div>