使用vertical-align、line-height、Flexbox或伪元素可实现行内元素垂直居中；具体方法包括设置vertical-align: middle配合line-height，或使用Flex布局的align-items: center，以及通过伪元素与inline-block协同对齐。
如果您希望在网页布局中让CSS行内元素在容器内垂直居中显示，通常会遇到默认基线对齐导致未真正居中的问题。以下是实现该效果的具体方法：
本文运行环境：MacBook Pro，macOS Sonoma。
一、使用 vertical-align 属性
vertical-align 可以控制行内元素或表格单元格内容的垂直对齐方式，常用于将行内元素相对于父元素基线进行调整。
1、为需要居中的行内元素设置 vertical-align: middle。
立即学习“前端免费学习笔记（深入）”；
2、确保其父容器具有合适的行高（line-height）或采用伪元素辅助对齐。
3、示例代码：
<span style="vertical-align: middle;">居中文本</span>
二、利用 line-height 与 height 相等
当容器高度固定时，可通过设置 line-height 等于容器 height 实现单行文本的垂直居中。
1、设定容器的 height 和 line-height 值相同。
2、将文本以行内元素形式放入该容器中。
3、注意此方法仅适用于单行文本内容。
三、采用 Flexbox 布局模型
将父容器设为 Flex 容器，可以轻松实现其内部行内元素的垂直居中。
1、设置父元素 display 属性为 flex。
2、应用 align-items: center; 来启用交叉轴上的居中对齐。
3、此时其内的行内子元素将自动垂直居中显示。
四、借助伪元素实现 inline-block 居中
通过添加一个与行内元素同高的匿名伪元素，并利用 vertical-align 进行对齐，可达到视觉上的垂直居中。
1、在父容器中插入一个高度等于容器高度的伪元素。
2、设置该伪元素和目标行内元素均为 vertical-align: middle。
3、伪元素 CSS 示例：
&::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
