用CSS怎样做垂直居中

发布时间：2023-12-19 10:27:37 所属栏目：语言来源：DaWei

导读： 对于CSS怎样实现垂直居中的效果，我们之前也了解了很多方法，而不同的实现方法各有其优缺点，本文再给大家分享一个特别的CSS实现垂直居中的方法，感兴趣的朋友就继续往下看吧。

这个就是

对于CSS怎样实现垂直居中的效果，我们之前也了解了很多方法，而不同的实现方法各有其优缺点，本文再给大家分享一个特别的CSS实现垂直居中的方法，感兴趣的朋友就继续往下看吧。

这个就是：伪元素:before搭配vertical-align:middle实现元素垂直居中，先来看一下具体的代码实现：
<style type="text/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;
}
</style>
<div class="parent">
<div class="child">child</div>
</div>

相信代码大家已经很熟悉了，但是你真正理解其中的原理吗？下面我们就看一下它是如何怎样一步步实现垂直居中的

分析

首先我们要知道一个关键知识点，那就是：父元素基线（baseline）的位置是可以改变的，它不是固定的，记住这一点很重要
接着，我们精简一下代码，去掉关键部分

<style type="text/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; */
}
</style>
<div class="parent">
<div class="child">child</div>
</div>

对于:before伪元素（以下简称伪元素）来说，加与不加vertical-align:middle，结果都是一样的，在垂直方向它始终会占满父元素；但对于.child元素情况就不同了，它在垂直方向的位置发生了改变，那么这是为什么呢？

其实伪元素在此处的作用就是为了改变（或者叫重新定义）父元素baseline的位置，我们来回顾一下vertical-align:middle在MDN文档中的定义

其实该种垂直居中方式的原理主要有以下几个要点：
Css中元素默认是左上方对齐的
伪元素高度与父元素保持统一
父元素将font-size置为0，进而x-height也被置为0
父元素基线的位置可改变

关于CSS实现垂直居中的方法就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!