实现垂直居中

1、伪类before after设置高度100%和inline-block，垂直对齐方式居中。

.parent{
  border:1px solid red;
  height:600px;
  text-align:center;
}
.child{
  border:1px solid green;
  width:300px;
  vertical-align:middle;
  display:inline-block;
}
.parent:before{
  border:1px solid black;
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
.parent:after{
  border:1px solid black;
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

2、table自带功能

.parent{
    border:1px solid red;
}
.child{
    border:1px solid green;
    vertical-align:center;
}

也可以给div设置table属性

3、子元素absolute; top,left各50%; margin-top,margin-left各负一半像素。

.parent{
    border:1px solid red;
    position:relative;
    height:600px;
}
.child{
    border:1px solid green;
    position:absolute;
    height:300px;
    width:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-150px;
}

4、translate -50%

.parent{
    border:1px solid red;
    position:relative;
    height:600px;
}
.child{
    border:1px solid green;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

5、margin auto

.parent{
    border:1px solid red;
    position:relative;
    height:600px;
}
.child{
    border:1px solid green;
    position:absolute;
    height:300px;
    width:300px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

6、flex

.parent{
    border:1px solid red;
    height:600px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.child{
    border:1px solid green;
    width:300px;
}