两种实现css垂直居中vertical-align的方法

vertical-align.css

/*#1*/
div {
  display: table-cell;
  vertical-align: middle;
}

/*#2*/
<h3>With an added pseudo element it's possible</h3>
<div class="block2"><div class="inner">Inline-Block</div></div>

/* With an added fake (pseudo) element it works */
.block2 {
  background: orange;
  height: 80px;
}

/* Fake (pseudo) element, that enables vertical-align */
.block2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  background: yellow;
  padding: 3px 5px;
}