CSS3元素垂直居中

css3-elements-vertically-centered.md

HTML

<div class="vertical-container">
  <div class="vertical-center">Centered</div>
</div>

CSS

.vertical-container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  background: #fff;
}

.vertical-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}