对于最流行的表格布局法和行内块法不去考虑，只考虑用最新的现代CSS去实现
-
基于绝对定位的解决方案
1.早期解决方法：
main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
显然这个方法最大的局限在于它要求元素的宽高时固定的，而通常情况，对那些需要居中的元素来说其尺寸往往由其内容决定的。
2.translate（）变形函数
mian {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
缺点：
- 有时我们不能选用绝对定位，对布局影响太强烈
- 如果需要居中的元素已经在高度上超过视口，那么他的顶部就会被视口裁切掉
- 某些浏览器，该方法会导致元素的显示有些模糊，因为元素可能被放置在半个像素上，这个问题可以用
transform-style:preserve-3d来修复，但是hack味道过重
3.基于视口单位的解决方案
CSS3中定位了一套新的单位，称之为视口相关的长度单位。
- vw是与视图宽度有关的，1vw是视口宽度的1%，而不是100%
- 与vw类似，
1vh表示视口高度的1% - 当视口宽度小于高度时，
1vmin等于1vw。否则等于1vh - 当视口宽度大于高度时，
1vmax等于1vw，否则等于1vh
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
缺点： 只适用于视图居中的场景
4.基于flexbox的解决方案
这是毋庸置疑的最佳解决方案，因为flex box（伸缩盒）是专门针对这种需求设计的。
我们只需两行声明即可：献给这个待居中的父元素设置display：flex, 再给这个元素自身设置我们熟悉的不能再熟悉的margin：auto。
body{
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
注意： 当我们使用Flexbox时，margin：auto不仅在水瓶方向将元素居中，垂直方向上也是如此。
还有一点，我们甚至不需要指定任何宽度：这个居中元素分配的宽度等于max-content(之前博客提到过的max-content)。
Flexbox好处在于： 它可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。
HTML:
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>
CSS:
* { margin: 0 }
body {
display: flex;
min-height: 100vh;
}
main {
padding: 1em 2em;
margin: auto;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
h1 {
margin-bottom: .2em;
font-size: 150%;
}
body {
background: #fb3;
font: 100%/1.5 sans-serif;
}
/** * Vertical centering - Flexbox solution for text */
body {
display: flex;
align-items: center;
min-height: 100%;
margin: 0;
}
html {
height: 100%
}
main {
display: flex;
justify-content: center;
align-items: center;
width: 18em;
height: 10em;
padding: 1em 1.5em;
margin: 0 auto;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
h1 { margin: 0 0 .2em; font-size: 150%;}
p { margin: 0;}
body { background: #fb3; font: 100%/1.5 sans-serif;}
Flex 垂直居中
