本文主要是介绍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。所以呢，学习要举一反三，不然不会有进步。
这篇关于div永远垂直居中的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
