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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  margin: 0;
  padding: 0;
}
body {
  display: flex;
}
.left {
  background-color: blue;
  height: 200px;
  flex: 1;
}
.right {
  background-color: red;
  height: 200px;
  width: 100px;
}

2、两边固定中间自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  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、水平垂直居中

第一种

1
2
3
4
5
6
7
8
9
10
11
#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二种

1
2
3
4
5
6
7
8
9
10
11
#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三种

1
2
3
4
5
6
7
8
9
10
11
#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四种 flex

1
2
3
4
5
#container{
    display:flex;
    justify-content:center;
    align-items: center;
}