SOURCE

<div class='single-line-text'>
  <span>单行文本line-height=父height</span>
</div>
<div class='inline-block-parent'>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class='table'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class='flex-parent'>
  <div></div>
</div>
<div class='relative-transform'>
  <div>aaa</div>
</div>
<div class='relative-margin'>
  <div>aaa</div>
</div>
<div class='relative-top-bottom'>
  <div>aaa</div>
</div>

*{
  color:#ddd;
}
div{
  width:100%;
  border:1px solid #ddd;
}
.single-line-text{
  line-height:100px;
  height:100px;
}
/* 子元素在父元素高度之内有效 */

.inline-block-parent{
  height:100px;
  margin-top:10px;
}
.inline-block-parent div{
  width:50px;
  height:50px;
}
.inline-block-parent::after, .inline-block-parent div{
  display:inline-block;
  vertical-align:middle;
} 
.inline-block-parent::after{
  content:'';
  height:100%;
}
.table{
  display:table;
  height:50px;
  margin-top:10px;
}
/* 子元素高度随意，父子元素哪个高度高随哪个 */
.table div{
  width:20px;
  display:table-cell;
  vertical-align:middle;
}
/* flex */
.flex-parent{
  margin-top:10px;
  height:50px;
  display:flex;
  align-items:center;
}
.flex-parent div{
  height:20px;
}
/*父relative 子absolute top transform */
.relative-transform{
  margin-top:10px;
  position:relative;
  height:50px;
}
.relative-transform div{
  position:absolute;
  top:50%;
  -webkit-transform: translate(0,-50%);  
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%); 
  height:20px;
}
/*父relative 子absolute top margin-top */
.relative-margin{
  position:relative;
  margin-top:10px;
  height:50px;
  
}
.relative-margin div{
  position:absolute;
  top:50%;
  height:20px;
  margin-top:-10px;
}
.relative-top-bottom{
  position:relative;
  margin-top:10px;
  height:50px;
}
.relative-top-bottom div{
  height:20px;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto 0;
  
}