div永远垂直居中的方法

如果div大小和父级元素大小已定，那垂直居中的方法就很多，今天来讨论下如果子元素大小和父级元素大小都不确定，要保持一个div永远垂直居中的方法。

用CSS3来实现

如果使用css3的话就有挺多的方法。

teansform:translate

.parent{
  position:relative;
    }
.child{
  position:absolute;
  top:50%;
  left:50;
  transform:translateX(-50%);
  transform:translateY(-50%);

在绝对定位里，top，left移动的百分比是相对于父级元素的百分比，而translate的百分比是自身大小的百分比，因此这样可以永远保持垂直居中。

flex

.parent{
            display: -ms-flex;
            display: -webkit-flex;
            display: flex;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
        }
.child{
            margin:0 auto;
        }

flex是个好东西，是未来布局的主要趋势。
当然现在要注意兼容性。

用CSS2来实现

table

.parent{display:table;}  
.child{display:table-cell;vertical-align:middle;text-align: center;}

table布局虽然我们现在不太用了，但是作为垂直居中的方式还是不错的，简单快捷。

inline-block

.parent{
            text-align: center;
            line-height: 500px;
            border: 1px solid black;
        }
.child{
            display: inline-block;
            vertical-align: middle;
            line-height: 30px;
            background-color: black;
        }

主要就是父元素要有line-height，然后子元素要display成inline-block,然后就能使用vertical-align让其垂直居中了。
这里重点在inline-block，是它的特性。
本来我也没想到还有这个方法的，不过昨天我师父跟我讲了，图片就能使用vertical-align，因为它是inline-block，所以把元素设置成inline-block就也能使用vertical-align。所以呢，学习要举一反三，不然不会有进步。