CSS垂直居中怎么实现
小编给大家分享一下CSS垂直居中怎么实现，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事网站设计制作、成都做网站、企业网站建设、移动网站建设、网页设计、品牌网站制作、网页制作、做网站、建网站。成都创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。
代码实现：
.parent {
display: inline-block;
width: 300px;
height: 300px;
font-size: 0;
background: #80848f;
text-align: center;
}
.parent:before {
display: inline-block;
width: 20px;
height: 100%;
content: '';
background: #ff9900;
vertical-align: middle;
}
.child {
display: inline-block;
width: 50px;
height: 50px;
background: #19be6b;
vertical-align: middle;
}
child
上面的代码运行结果是这样的：
相信代码大家已经很熟悉了，但是你真正理解其中的原理吗？下面我们就看一下它是如何怎样一步步实现垂直居中的
分析
首先我们要知道一个关键知识点，那就是：父元素基线（baseline）的位置是可以改变的，它不是固定的，记住这一点很重要
接着，我们精简一下代码，去掉关键部分
.parent {
display: inline-block;
width: 300px;
height: 300px;
/* font-size: 0; */
background: #80848f;
text-align: center;
}
.parent:before {
display: inline-block;
width: 20px;
height: 100%;
content: '';
background: #ff9900;
/* vertical-align: middle; */
}
.child {
display: inline-block;
width: 50px;
height: 50px;
background: #19be6b;
/* vertical-align: middle; */
}
child
