垂直居中的几种实现方案

[JCHappytime]

参考文章

1. CSS实现垂直居中的方法
2. CSS垂直居中常用的几种方法

方法1

对父容器使用display: table-cell + vertical-align: middle，使其内部的子元素实现垂直居中。
原理：父元素设置为表格的单元格元素，而在表格单元格中的元素设置：vertical-align: middle会使其以中间对齐的方式来显示。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}
.child{
  width: 50px;
  height: 50px;
  background: blue;
}

方法2

利用给父元素设置相对定位，子元素设置绝对定位，margin: 0 auto 和 top: 0; bottom: 0;从而实现垂直居中。
原理：因为auto默认分配剩余空间，宽度相对window是固定的，所以margin: 0 auto;可以有水平居中的效果，而高度相对window并不是固定的，所以margin: auto 0;不能垂直居中，所以让子元素上下margin值不相对于window进行计算，改为相对父元素进行计算即可。如下：

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
child{
  width: 200px;
  height: 200px;
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

方法3

flex布局可以很方便的实现垂直与水平居中，好处很多，在移动端使用比较广泛，不好的地方就是浏览器兼容性不好。代码如下：

//html
<div class="main">
  <div class="middle"></div>
</div>

//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle{
  width: 30%;
  height: 50%;
  background: red;
}

方法4

绝对定位/相对定位，在不知道自己高度和父容器高度的情况下，利用绝对定位.

.parent {
  position: relative;
}

.children {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}