垂直居中DIV

HTML代码：

<div class="father">
  <div class="son">我是垂直居中的div</div>
</div>

实现方式：

1. 绝对定位（宽高已知）

.father {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: gray;
}
.son {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-top: -50px;//向上移动自身高度的一半
  margin-left: -50px;//向左移动自身宽度的一半
}

预览效果：

2. 绝对定位（宽高已知）

.father {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
}
.son {
  position: absolute;
  margin: auto;
  width: 100px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

预览效果：

3. 定位（宽高未知）

.father {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 往上（x轴）,左（y轴）移动自身长宽的 50% */
  transform: translate(-50%, -50%);
  background-color: #fff;
}

预览效果：

4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）

.father {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: gray;
}
.son {
  background-color: #fff;
}

预览效果：

5. flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）

.father {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: gray;
}
.son {
  background-color: #fff;
}

预览效果：

6. 表格布局（父元素设置，宽高未知）（兼容性较好）

.father {
  display:table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: gray;
}
.son {
  display: inline-block;
  background-color: #fff;
}

预览效果：

两栏布局

右边固定左边自适应

这与右边固定左边自适应，上固定下自适应同理。

HTML部分

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
</div>

实现方式：

1. float布局

.father {
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.left {
  width: 200px;
  height: 200px;
  background-color: pink;
  float: left;
}
.right {
  margin-left: 200px;
  height: 200px;
  background-color: gray
}

预览效果：

2. 绝对定位

.father {
  height: 200px;
  background-color: #fff;
  position: relative;
}
.left {
  height: 100%;
  width: 200px;
  background-color: pink;
  float: left;
}
.right {
  position: absolute;
  left: 200px;
  right: 0;
  height: 100%;
  background-color: gray;
}

预览效果：

3. flex布局

.father {
  height: 300px;
  display: flex;
  background-color: #fff;
}
.left {
  width: 300px;
  height: 100%;
  /* flex: 0 0 auto; */
  background-color: pink;
}
.right {
  /* flex: 1 1 0%; 高度宽度自适应*/
  flex: 1;
  background-color: gray;
}

三栏布局

左右固定中自适应

这与左中固定右边自适应，中右固定左边自适应，以及上下固定中间自适应同理

1. float布局

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

.father {
  height: 50px;
  background-color: #fff;
}
.father div {
  height: 100%;
}
.left {
  width: 200px;
  float: left;
  background-color: pink;
}
.main {
  margin-left: 200px;
  margin-right: 200px;
  background-color: yellow;
}
.right {
  width: 200px;
  float: right;
  background-color: gray;
}

预览效果：

2. 绝对定位

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

.father {
  height: 50px;
  background-color: #fff;
  position: relative;
}
.father div {
  height: 100%;
  position: absolute;
}
.left {
  left: 0;
  width: 200px;
  background-color: pink;
}
.main {
  left: 200px;
  right: 200px;
  background-color: yellow;
}
.right {
  width: 200px;
  right: 0;
  background-color: gray;
}

预览效果：

3. flex布局

<div class="father">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.father {
  height: 50px;
  background-color: #fff;
  display: flex;
}
.father div {
  height: 100%;
}
.left {
  width: 200px;
  background-color: pink;
}
.main {
  flex: 1;
  background-color: yellow;
}
.right {
  width: 200px;
  background-color: gray;
}

预览效果：