css 常用 垂直居中 总结

网上有很多垂直居中方法，可能大多数都用不到，下面根据项目中 最经常用到的几种 做以下总结：

1.  最经常用的 ，应该也是简单的  flex  弹性布局
    在父元素的设置:

.container{
     dispaly:flex;
     justify-content:center;
     aligin-items:center;   
}

2. 有绝对定位的div 水平 垂直居中

.vertical-center-position{
      position:absolute;
      width: 300px;
      height: 300px;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;

}

3. 利用绝对定位和  transform

.container{
    position:relative;  // 父元素相对定位
}

.item {  // 子元素 绝对定位
        position:absolute;
        left:50%;  /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
      }

4. 行内元素  垂直居中

.container{
    text-align:center;
    height:50px;
    line-height:50px;
}