垂直居中布局

垂直居中布局：就是指当前元素在父级元素容器中，垂直方向是居中显示的

<div class="parent">
    <div class="child">垂直居中</div>
</div>

方案一：table-cell + vertical-align属性配合使用

.parent{
    width:200px;
    heigth:600px;
    background:#ccc;
    /*
        display属性：
          table:设置当前元素为<table>元素
          table-cell:设置当前元素为<td>元素（单元格）
    */
    display:teble-cell;
    /*
        vertical-align属性：用于设置文本内容的垂直方向对齐方式
         top:顶部对齐
         middle:居中对齐
         bottom:底部对齐
    */
    vertical-align: middle;
}

.child{
   width:200px;
   height:200px;
   background:#c9394a;
}

优点：浏览器兼容性比较好

缺点：vertical-align属性具有继承性，导致父级元素的文本也是居中显示的

方案二：absolute + transform属性配合使用

.parent{
    width:200px;
    heigth:600px;
    background:#ccc;
    
    position:relative;
}

.child{
   width:200px;
   height:200px;
   background:#c9394a;

   position:absolute;
   top:50%;
   transform:translateY(-50%); /*translate 平移*/
}

优点：

父级元素是否脱离文档流，不影响子级元素垂直居中效果

缺点：

transform属性是css3中新增属性，浏览器支持情况不好