CSS-文字垂直居中

问题来源CSS 基础测试16
HTML结构如下：

<div class="quiz">
    <h6 class="quiz-h">201912</h6>
    <p class="quiz-p">12月5日，由游戏行业头部媒体游戏陀螺、VR陀螺、陀螺电竞、陀螺财经主办的第四届金陀螺奖颁奖典礼于深圳举办。金陀螺奖是国内游戏业界中最为瞩目的游戏奖项之一，此次大会以“蝶变·向上的力量”为主题，聚焦游戏行业的未来趋势发展、行业创新升级、商业生态新连接等前沿领域，具有极高的代表性和权威性。此次颁奖典礼中，阅文集团根据IP定制改编手游《新斗罗大陆》荣获“年度人气IP类游戏奖”。</p>
</div>

四种解决方案：

1.table-cell(IE8+)

.quiz {
  background-color: white;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
}
.quiz-h {
  font-size: 100%;
  
  display: table-cell;
  vertical-align: middle;
}
.quiz-p {
  color: gray;

  display:table-cell;
}

2.flex(IE10+)

.quiz {
  background-color: white;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;

  display: flex;
}
.quiz-h {
  font-size: 100%;
  
  dispaly:flex;
  align-items: center;
}
.quiz-p {
  color: gray;
}

3.inline-block(IE8+)

.quiz {
  background-color: white;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;

  display: flex;
}
.quiz-h {
  font-size: 100%;
  
  dispaly: inline-block;
  margin-right:-70px;
  vertical-align: middle;
}
.quiz-p {
  color: gray;

  display: inline-block;
  margin-left: 70px;
  vertical-align: middle;
}

4.absolute(IE8+)

.quiz {
    background-color: white;
    border: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    
    position: relative;
}
.quiz-h {
    font-size: 100%;
    
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 10px;
    line-height: 1.5em;
    height: 1.5em;
}
.quiz-p {
    color: gray;
    
    margin-left: 5em;
    
}

.quiz {
    background-color: white;
    border: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    
    position: relative;
}
.quiz-h {
    font-size: 100%;
    
    position: absolute;
    top: 50%;
    bottom: 0;
    margin: -1em 10px;
    line-height: 2em;
}
.quiz-p {
    color: gray;
    
    margin-left: 5em;
    
}