.parent中不写height

直接在.child中加上padding:10px 0即可使.child垂直居中。

.parent中写height

table方案

table自带垂直居中功能 html

<table class="parent">
  <tr>
    <td class="child">
      垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
      垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
    </td>
  </tr>
</table>

css

.parent {
    border: 3px solid red;
    height: 600px;
}
.child {
    border: 3px solid green;
}

效果图

div装成table方案

html

<div class="table">
  <div class="td">
    <div class="child">
      垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
      垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
    </div>
  </div>
</div>

css

div.table{
  display: table;
  border: 1px solid red;
  height: 600px;
}
div.tr{
  display: table-row;
  border: 10px solid green;
}
div.td{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
  border: 1px solid green;
}

效果图

flex和grid方案

HTML

<div class="parent">
  <div class="child">
    垂直居中
  </div>
</div>

CSS grid布局， 设置display:grid

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

效果图

translate方案

html

<div class="parent">
  <div class="child">
    垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
  </div>
</div>

css

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

效果图

margin方案

html

<div class="parent">
  <div class="child">
    垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
  </div>
</div>

css1 设置margin-top为-50%

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

css2 设置margin为auto

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

效果图

after和before方案

html

<div class="parent">
  <div class="child">
    垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
  </div>
</div>

css 100%高度的after和before 通过inline-block实现

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

效果图