垂直居中

有高度

• 方式一：（height）使用 margin + position
• 方式二：（height） 使用 margin

/*方式一：*/
.center {
   height: 100px;
   width: 200px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
   background-color: yellow;
}

/*方式二：*/
.center {
     height: 100px;
     margin: 50px 0;
     background-color: red;
 }

没有高度

• 方式一： position + transform
• 方式二： flex

/*方式一：*/
.center {
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  background-color: yellow;
}

/*方式二：*/
.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.center {
    width: 100%;
    background-color: rebeccapurple;
}