内部div无确定高度的垂直居中方式有很多。在查找资料的时候，我学习了以下几种实用方式：
第一种：使用 Flex
首先说一下Flexbox。Flexbox是css3的一个盒子模型，其中我们只要使用align-items和 align-content 就能较为快速地实现内部div没有确定高度居中方式。
测试代码：
html:
<body>
<div class="flexbox">
<div></div>
</div>
</body>
css:
html, body {
margin: 0;
padding: 0;
width: 100% ;
height: 100% ;
}
.flexbox {
display: flex;
align-items: center;
justify-content: center;
width: 100% ;
height: 100% ;
}
.flexbox div {
width: 100px;
height: 50px;
background: #fcf000;
}
效果图：
使用 Flexbox垂直居中
第二种：使用 transform
transform是css3的新属性，可以操控节点的位移，旋转等。在垂直居中中，只要用到了transform中的translateX，translateY这两个属性。
使用translateX，translateY来居中有以下的几点要注意的：
- 子div（子节点）需要使用 position: relative;
- 使用top，left分别为-50%。以及translateX，translateY为50%进行位移居中
测试代码：
html:
<body>
<div class="transform">
<div></div>
</div>
</body>
css:
html, body {
margin: 0;
padding: 0;
width: 100% ;
height: 100% ;
}
.transform {
width: 100% ;
height: 100% ;
}
.transform div {
position: relative;
width: 100px;
height: 50px;
top: 50% ;
left: 50% ;
transform: translateY(-50%) translateX(-50%);
background: #f96600;
}
效果图：
使用 transform垂直居中
第三种：使用display属性
.transform {
width: 100% ;
height: 100% ;
display: table; // 设置display属性
}
.transform div {
width: 100px;
height: 50px;
display: table-cell; // 子元素水平居中
vertical-align: middle; // 垂直居中
background: #f96600;
}
这种方法的优点在于：
content 可以动态改变高度(不需在 CSS 中定义)。
当 父节点里没有足够空间时，content 不会被截断。（在实际中这个是十分实用的）
而使用绝对定位content不可以动态改变高度。
第四种：使用position:absolute
使用这个方法时，需要给要居中的元素设置position:absolute，注意父元素position: relative，并且元素的宽度和高度是固定的。
由于它有固定高度和并不能上下边界都未0，所以可以实现垂直居中。
.transform div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 50px;
}
但是缺点也是十分明显的，就是内容超出时不会自动增加高度，而第三种就可以实现相对的高度。
最后，垂直居中方式有很多，采取合适才是最重要的。
文章参考：
CSS 垂直置中的七個方法
CSS实现垂直居中的5种方法
网友评论