史上最全垂直居中方法(almost)总结

// HTML 结构
<div class="container">
    <div class="center"></div>
</div>

// table法
.container {
  width: 600px;
  height: 400px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center {
  background: tomato;
}

// 绝对定位法+transform（常用）
.container {
  height: 400px;
  background: #eee;
  position: relative;
}
.center {
  background: tomato;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// flex 个人常用，有兼容性风险
.container{
  height: 400px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width: 100px;
  height: 100px;
  background: tomato;
}

// 绝对定位+margin特性
.container{
    width: 400px;
    height: 400px;
    background: gray;
    position: relative;
}
.center {
    position: absolute;
    height: 200px;
    width: 200px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

// grid网格法
.container{
    display: grid;
    width: 300px;
    grid-template-columns: repeat(3, 100px); 
    grid-template-rows: repeat(3, 100px);
    background: gainsboro;
}

.center {
    background: tomato;
    grid-column: 2 / 3;
    grid-row: 2 / 2;
}

如果你已经看到这里，那咱们也是有缘人，老衲将收藏多年的最简方法授予你：

.container {
    height: 400px;
    display: flex;
}
.center {
    margin: auto;
    width: 100px;
	height: 100px;
	background: tomato;
}