关于css 的垂直居中

对于元素的水平居中，我根据我本身以前的一些学习来进行一些总结，若是有不对的地方，欢迎指正~

1、让大小不固定的元素垂直居中

1. 由于：表格的单元格的特别属性：垂直居中等；
   `div.parent {

   display: table-cell;
      vertical-align: middle;
      height: 200px;

   }
   div.parent img{
   }`

2. 属性line-height的设置
   `div.parent{

   height: 100px;
      line-height:100px;

   }
   div.parent img{

   vertical-align:middle;

   }`

3. 绝对定位 + margin:auto;
   div.parent{

   height: 300px;
      width: 300px;
      position: relative;
      background-color: red;

   }
   div.parent img{

   position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;

   }
   ps.第三种方法我好久之前也有用过，一开始我简单的认为是：因为上下左右都设置为0了因此 margin auto后元素自适应居中，因而某一天我看到了张鑫旭大大的博客才就知道了为何：引用张大大的话：

   1.当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了;
   2.由于left/right同时存在，因此宽度自适应于包含块的padding box宽度，也就是随着包含块padding box的宽度变化，包含块宽度也会跟着一块儿变。具备流体特性绝对定位元素的margin:auto的填充规则和普通流体元素如出一辙：
   若是一侧定值，一侧auto，auto为剩余空间大小；若是两侧均是auto, 则平分剩余空间；

2、大小固定的元素垂直居中

对于大小固定的元素，上面的几个方法也是能够用的。

1.绝对定位 + margin:-元素的 宽度&&高度

div.parent{
        height: 200px;
        width: 200px;
        position: relative;
        background-color: red;
    }
    div.parent img{
        width: 100px;
        height: 100px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }
        //定位额度时候以元素的右上角为参考点，因此咱们须要负值的margin把相差的元素的一半的宽高大小的距离拉回来

对于固定宽高的还有其它不少方法啦，我就不一一列举了。

以前看了张大大的博客,总结一下我对line-height 和 vertical-align的一些认知 。vertical-align 的几个属性值baseline，bottom，top，middle 等跟文字的基线相关联，而line-height 是不管大小都与文字垂直居中的，好比line-height与高度一致能够设置文字居中，因此，同样的道理，vertical-align 跟line-height 能够联手设置垂直居中。

我以为在网页的布局中，若是出现任何难理解的奇怪的现象，均可以先从 line-height 和vertical-align 上排除.

以上是个人学习总结，但愿你们坚持，加油，你不是一我的在奋斗。

站在巨人的肩膀上学习，再次谢谢张大大阮大大的各类分享。