CSS基础测试16：两栏垂直居中布局

[wingmeng]

题目：

补全代码，完成两栏垂直居中布局，地址：http://quiz.xiliz.com/css-quiz16.html 每个方法2积分，每个方法都注意视觉还原效果，如果效果不佳会酌情扣分。

我的回答：

/* 方法1（IE8+） */
.quiz {
  display: table;
}
.quiz-h {
  padding: 0 10px;
  margin: 0;
  vertical-align: middle;
}
.quiz-p {
  margin: 0 5px;
}

/* 方法2（IE10+） */
.quiz {
  align-items: center;
}
.quiz-h {
  padding: 0 10px;
  margin: auto;
}
.quiz-p {
  flex: auto;
  margin: 0 5px;
}

/* 方法3（IE8+） */
.quiz {
  white-space: nowrap;
}
.quiz-h {
  margin: 0;
  padding: 0 10px;
  vertical-align: middle;
}
.quiz-p {
  margin: 0;
  margin-right: 90px;  /* .quiz-h 的宽度(79.2px)+ 间距(10px) */
  vertical-align: middle;
  white-space: normal;
}

/* 方法4（IE8+） */
.quiz {
  position: relative;
}
.quiz-h {
  top: 0;
  bottom: 0;
  height: 1.5em;
  margin: auto 10px;
}
.quiz-p {
  margin: 0 5px 0 80px;
}