实现垂直居中布局的方案

[GGXXMM]

1、单行文本 垂直居中

单行文本元素设置height和line-height属性。

div {
    height: 100px;
    line-height: 100px;
}

• 优点：
  简单；兼容性好。
• 缺点：
  只能用于单行行内内容；要知道高度的值。

2、多行文本 垂直居中

#parent{ 
    height: 150px;
    line-height: 30px;  /*元素在页面呈现为5行,则line-height的值为height/5*/
}

优缺点同上。

3、图片 垂直居中

原理：vertical-align和line-height的基友关系

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img{
    vertical-align: middle; /*默认是baseline基线对齐，改为middle*/
}

4、单个块级元素 垂直居中

使用tabel

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

• 优点：
  简单，子元素高度不定；兼容性好（ie8+）。
• 缺点：
  1）设置table-cell的元素，需要给父元素设置display: table;才生效；
  2）设置table-cell的元素，不感知margin；
  3）如果添加float/position会破坏该布局，可以考虑为之增加一个父div定义float属性。

使用绝对定位

/*原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的*/
#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子绝*/
    top: 50%;  /*父元素高度一半,这里等同于top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,这里等同于margin-top:-25px;*/
    height: 50px;
}

/*优缺点
- 优点：使用margin-top兼容性好；不管是块级还是行内元素都可以实现
- 缺点：代码较多；脱离文档流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/

或

/*原理：当top、bottom为0时,margin-top&bottom会无限延伸占满空间并且平分*/
#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

/*优缺点
- 优点：简单;兼容性较好(ie8+)
- 缺点：脱离文档流*/

flex

#parent{
    display: flex;
    align-items: center;
}

• 优点：
  功能强大；简单方便；适用移动端（Android4.0+）。
• 缺点：
  PC端兼容性不好。