CSS布局

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

2、两边固定中间自适应

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、