css垂直居中四个方法总结

方法一：基于绝对定位的解决办法：它要求元素具有固定的宽度和高度

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

方法五：基于视口单位的解决方案
此办法太过局限，当作没有为好。