垂直居中

html:

<main>
  <h1>title</h1>
  <p>content</p>
</main>

基于绝对定位

固定大小的，法一:

main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18em;
  height: 6em;
  margin-top: -3em;
  margin-left: -9em;
}

进一步的，还是固定大小的，法二：

main {
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}

再进一步的, 不固定大小了，法三：

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);     /* IE 9 */
  -moz-transform: translate(-50%, -50%);    /* Firefox */
  -webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
  -o-transform: translate(-50%, -50%);  /* Opera */
}

基于视口单位

法四：

main {
  width: 18em;
  padding: 1em 1.5em;
  margin: 50vh auto 0;
  transform: translateY(-50%);
}

基于Flexbox

法五：

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}
main {
  margin: auto;
}

ps: 使用flexbox的时候，margin: auto不仅在水平方向上居中，垂直方向也居中了

Flexbox可以把匿名容器垂直居中

ps 匿名容器: 没有被标签包裹的文本节点

html:

<main>test</main>

main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18em;
  height: 10em;
}