总结 CSS 布局方式

发表于

一些css布局示例

一、有俩div， 左边固定宽度， 右边自适应

1
2
3
4
<div class="content">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

flex

1
2
3
4
5
6
7
8
9
10
11
.content{
  display: flex;
  height: 100%;
}
.left{
  width: 200px;
  border-right: 1px solid #333;
}
.right{
  flex:1;
}

float

1
2
3
4
5
6
7
8
.left{
  float: left;
  width: 200px;
  border-right: 1px solid #333;
}
.right{
  margin-left: 200px;
}

position

1
2
3
4
5
6
7
8
9
.left{
  position: absolute;
  width: 200px;
  border-right: 1px solid #333;
}
.right{
  margin-left: 200px;
}
//同理， .right使用position也可

二、有一div， 水平垂直居中

1
2
3
<div class="content">
  <div class="center">Center</div>
</div>

display:flex

1
2
3
4
5
6
7
8
9
.content{
  display:flex;
  justify-content:center;
  align-items: center;
  height: 100%;
}
.center{
  border: 1px solid #999;
}

position: absolute

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.content{
  position: relative;
  height: 100%;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px auto auto -50px;
  border: 1px solid #999;
  width: 100px;
  height: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content{
  position: relative;
  height: 100%;
}
.center{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #999;
  width: 100px;
  height: 100px;
}

同position:absolute一样， position:relative也同样可以使元素居中， 且有多种方法
思路基本同position:absolute一样， 比如：

1
2
3
4
5
6
7
8
9
10
11
12
.content{
  height: 100%;
}
.center{
  position: relative;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  transform: translate(-50%, -50%);
}