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。所以呢，学习要举一反三，不然不会有进步。