使用css实现垂直居中

1. vartical-align
   　　vartical-align可以设置行内元素和表格单元格（table-cell）垂直对方式，所以如果元素是行内元素或者表格的话，可以直接应用这个属性对内容进行对齐设置。如果是块级元素，需要将元素的display设置为table-cell，然后使用vartical-align=center
   blockElement{
    　   display:table-cell;
   　　vartical-align:center；
   　}
   缺点：table-cell是css3中的属性，所以根据平台的不容可能会有兼容性的问题。具体兼容程序可以在caniuse网站查询。
2. align-items
   align-items是设置伸缩盒中的元素在cross axis（侧轴）方向的放置方式。
   通过设置display：flex和align-items：center就可以实现将元素居中。
   element{
   　　display:flex;
          align-items：center;
   }
   缺点：同样是兼容性问题
   
3. justify-content
   justify-content是设置伸缩盒中的元素在main axis（主轴）方向的放置方法。主轴是从左到右的，但是通过将flex-direction设置为column可以将主轴改变为上下方向。然后使用justify-content将元素居中。
   　　element{
               display: flex;
               flex-direction: column;
               justify-content: center;
           }
4. 绝对定位与相对定位
   　　同时使用父元素和子元素的高度，将父元素设置为相对定位，子元素设置为绝对定位。然后通过设置top或bottom值，就可以轻易的将子元素居中；
   fatherElement{
   　　pisition:relative；/*相对定位*/
   　　height：number；
   }
   element{
         position:absolute; /*绝对定位*/
   　   top:number;
   }
   缺点：这种情况的前提就是必须已知父元素和子元素的高度，然后根据差值计算。
   
5. 绝对定位和负外边距
          这种情况跟上面的区别就是只使用子元素的高度。设置绝对定位的元素top值为50%，子元素的上边缘位于父元素的50%高度，然后使用负外边距将元素向上移动一般子元素高度
   fatherElement{
   　　position：relative;
   }
   element{
   　　position:absolute;
          top:50%;
          margin-top:-number;/*负值，值为子元素的二分之一高度*/
   }
   缺点：必须知道被居中元素的尺寸；
6. 绝对定位和transform的translate
   这个方法与上一个方法一处不同，就是在设置了top为50%之后，如何将元素向上移动自身高度的一半。css3中的transform转换有移动函数translate（x,y），x和y既可以为数值，也可以为百分数；如果是百分数，表示自身高度*百分数，所以
   fatherElement{
   　　position：relative;
   }
   element{
   　　position:absolute;
          top:50%;
   　　transform：translate（0，-50%）；
   }
7. 绝对定位和margin：auto
   绝对定位的前提下，设置相同的top和bottom值，然后使用margin：auto，可以使元素居中。
   fatherElement{
   　　position：relative;
   }
   element{
   　　position:absolute;
          top:0;
   　　bottom:0;
   　　margin:auto;
   }
   这里必须在绝对定位之后，对top和bottom进行赋值，值是多少无所谓，但是必须相等。然后使用margin为auto即可实现居中。
8. padding
   这个道理很简单，就是设置相同的上下内边距，从而使子元素居中。
   #divFather{
           width: 400px；
           padding:10px 0;
       }
       #divFather>div{
           width: 100px;
           height: 100px;
       }
   　　在没有对父元素设置高度的时候，这个居中实质上是等距离加大padding，从而让元素看起来就是居中的，父元素的内容区高度就是子元素的高度。
9. 使用line-height对单行文本进行居中
   设置line-height与容器的高度相同，可以使单行文本居中
   div{
           width: 400px;
           height: 200px;
           line-height: 200px;
       }
10. 使用line-height和vertical-align对图片进行居中
    <div>
    　　<img>
    </div>
    div{
        width: 300px;
        height: 300px;
        background: #ddd;
        line-height: 300px;
    }
    div img {
        vertical-align: middle;
    }