垂直居中方法

1.flex布局

给父元素设置

.parent {

     display:flex;

     justify-content: center;

     align-items: center

}

 2.flex + margin auto

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代码 */
  display: flex;
}
 
.child {
  background: tomato;
  /* 核心代码 */
  margin: auto;
}

3.网格布局

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: grid;
  align-items: center;
  justify-content: center;
}
 
.child {
  background: tomato;  
}

4.absolute 加 tranform

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}
 
.child{
  background: tomato;
  /* 核心代码 */
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

5 absolute + 负 margin 

.parent {
  position:relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}
 
.child {
  background: tomato;
  width: 100px;

  height: 100px;
  /* 核心代码 */
  position:absolute;
  top: 50%;

  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

6.absolute + calc

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}
 
.child {
  background: tomato;
  width: 200px;

   height: 200px;
  /* 核心代码 */
  position:absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}