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;
}
