总结垂直居中各方法优缺点和使用场景

一、容器内

 1 .Center-Container {
 2   position: relative;
 3 }
 4
 5 .Absolute-Center {
 6   width: 50%;
 7   height: 50%;
 8   overflow: auto;
 9   margin: auto;
10   position: absolute;
11   top: 0; left: 0; bottom: 0; right: 0;
12 }  

二、负外边距

.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}  

优点：

1.      良好的跨浏览器特性，兼容IE6-IE7。

2.      代码量少。

缺点：

1.      不能自适应。不支持百分比尺寸和min-/max-属性设置。

2.      内容可能溢出容器。

3.      边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

三、变形

.is-Transformed {
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}  

优点：

1.      内容可变高度

2.      代码量少

缺点：

1.      IE8不支持

2.      属性需要写浏览器厂商前缀

3.      可能干扰其他transform效果

4.      某些情形下会出现文本或元素边界渲染模糊的现象

四、表格单元格

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

优点：

1.      高度可变

2.      内容溢出会将父元素撑开。

3.      跨浏览器兼容性好。

缺点：

需要额外html标记

五、行内块元素

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}  

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}  

.Center-Container.is-Inline:after {
  content: ‘‘;
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}  

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}  

优点：

1.      高度可变

2.      内容溢出会将父元素撑开。

3.      支持跨浏览器，也适应于IE7。

缺点：

1.需要一个容器

2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

3.内容块宽度不能超过容器的100% - 0.25em。

六、flex布局

.center-container{
        display:flex;
        justify-content:center;
        align-item:center
}
.center-content{
        width:50%;
        height:50%
}

优点：

1.      高度宽度可变

缺点：

1.需要一个容器

2.ie7/8 不兼容