纯css垂直居中的七种方法

方法一：行高（line-height）
行高是垂直居中最简单的方式，仅适用于单行文本

<div class="div">
  aaa
</div>

.div {
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  text-align: center;
  border: 1px solid red;
  line-height: 200px;
}

方法二：伪元素（::before、::after）
CSS里头vertical-align这个属性，这个属性虽然是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，并不是相对于外框的高度垂直居中。记得要把 div 设为 display:inline-block，毕竟vertical-align:middle；是针对行内元素，div本身是block，所以必须要做更改！

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  text-align: center;
  border: 1px solid red;
}
.div .vertical-0 {
  display: inline-block;
  background-color: red;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.div::after {
  content: '';
  vertical-align: middle;
  height: 100%;
  display: inline-block;
  position: relative;
}

方法三：display:table-cell
可以将要垂直居中元素的父元素的display改为table-cell，就可以轻松实现，不过修改display有时候也会造成其他样式属性的连动影响，需要小心使用

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}
.div .vertical-0 {
  background-color: red;
  width: 50px;
  height: 50px;
  margin: 0 auto; // 水平居中
}

方法四：transform
transform是CSS3的新属性，利用transform的translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid red;
}
.div .vertical-0 {
  background-color: red;
  width: 50px;
  height: 50px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto; // 水平居中
}

方法五：calc动态计算
50%的外框div高度+ 50%的垂直居中div高度，就可以做到垂直居中，需要知道垂直居中div高度是才可实现垂直居中，子元素必须要加上position:relative，不然就会没有效果

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid red;
}
.div .vertical-0 {
  background-color: red;
  width: 50px;
  height: 50px;
  position: relative;
  top: calc(50% - 25px);
  margin: 0 auto; // 水平居中
}

方法六：绝对定位
利用CSS的position:absolute，绝对位置来指定。要特别注意的是，设定绝对定位的子元素，其父元素的position必须要指定为relative！而且绝对定位的元素是会相互覆盖的，所以如果内容元素比较多，可能就会有些问题

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  position: relative;
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid red;
}
.div .vertical-0 {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

方法七：display:flex
display:flex为弹性布局，利用其align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果

<div class="div">
  <div class="vertical-0"></div>
</div>

.div {
  position: relative;
  width: 600px;
  height: 200px;
  background-color: #f5f5f5;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center; // 水平居中
}
.div .vertical-0 {
  background-color: red;
  width: 50px;
  height: 50px;
}

以上就是一些垂直居中的方法，由于垂直居中往往会动用到修改display这个属性，往往也会在排版上造成一些影响，因此如何活用这些CSS垂直居中的方法，就要看大家的样式结构而灵活运用