CSS布局

1、右边宽度固定，左边自适应

\* {
        margin: 0;
        padding: 0;
    }
    body {
        display: flex;
    }
    .left {
        background-color: blue;
        height: 200px;
        flex: 1;
    }
    .right {
        background-color: red;
        height: 200px;
        width: 100px;
    } 

2、两边固定中间自适应

\* {
        margin: 0;
        padding: 0;
    }
    body {
        display: flex;
    }
    .center {
        background-color: rebeccapurple;
        height: 200px;
        flex: 1;
    }
    .left {
        background-color: red;
        height: 200px;
        width: 100px;
    }
    .right {
        background-color: red;
        height: 200px;
        width: 100px;
    } 

3、水平垂直居中

第一种
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
第二种
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
第三种
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
第四种 flex
#container{
display:flex;
justify-content:center;
align-items: center;
}

4、

5、

6、

7、