关于css 的垂直居中

对于元素的水平居中，我根据我自己之前的一些学习来进行一些总结，如果有不对的地方，欢迎指正~

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

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, 则平分剩余空间；

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

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

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 上排除.

以上是我的学习总结，希望大家坚持，加油，你不是一个人在奋斗。

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