方法一：基于绝对定位的解决办法：它要求元素具有固定的宽度和高度
main{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em; /* 6/2 = 3 */
margin-left: -9em; /* 18/2 = 9 */
width: 18em;
height: 6em;
}
或者
main{
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
//或者
//绝对定位与margin
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
width: 100px;
height: 100px;
top:0;
bottom:0;
left:0;
right:0;
}
显然，这个方法最大的局限在于它要求元素的宽高是固定的。在通常情 况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。
如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题 就迎刃而解了!遗憾的是，对于绝大多数 CSS 属性(包括 margin)来说， 百分比都是以其父元素的尺寸为基准进行解析的。
CSS 领域有一个很常见的现象，真正的解决方案往往来自于我们最 意想不到的地方。在这个例子中，答案来自于 CSS 变形属性。当我们在 translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度 为基准进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于 百分比的 CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸 写死了。这样我们就可以彻底解除对固定尺寸的依赖:
方法二：（css3不需要知道高度）
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em 1.5em;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
body {
background: #fb3;
font: 100%/1.5 sans-serif;
}
方法三：基于 Flexbox 的解决方案（不需要知道宽高）
请注意，当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元 素居中，垂直方向上也是如此
body {
display: flex;
min-height: 100vh;
}
main {
padding: 1em 2em;
margin: auto;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
方法四：display:table-cell(不需要知道宽高）
父级元素设置display:table-cell;此元素会作为一个表格单元格显示，类似td,th
//兼容性比较好IE8及以上 以及一些主流浏览器
div.parent{
display:table-cell;
vertical-align: middle;
text-align: center;
}
方法五：基于视口单位的解决方案
此办法太过局限，当作没有为好。
