垂直居中的8种方式

两个盒子

<div
    style={{ width: "300px", height: "300px", background: "aqua" }}
    className="wrap"
>
    <div
        style={{ width: "100px", height: "100px", background: "coral" }}
        className="content"
    ></div>
</div>

一、flex方法

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

二、absolute+transform

.wrap{
  position: relative;
}
.content{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

三、absolute+负margin(知道子元素的宽度)

.wrap{
  position: relative;
}
.content{
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -50px;
  margin-top:-50px;
}

四、absolute+margin:auto

.wrap{
  position:relative;
}
.content{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

五、inline-block+vertical-aligin

.wrap{
  text-align: center;
  line-height: 300px;
}
.content{
  vertical-align: middle;
  display: inline-block;
}

六、table-cell+vertical-aligin

.wrap{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.content{
  display: inline-block;
}

七、margin+transform

.wrap{
  overflow: hidden;
}
.content{
  margin: 50% auto;
  transform: translateY(-50%);
}

八、grid

.wrap {
  display: grid;
}
.content {
  align-self: center;
  justify-self: center;
}