垂直居中

一、单行文本垂直居中（行高 line-height 法）
方法解释：
核心原理：将元素行高（line-height） 设置为和元素自身高度（height） 相等，单行文本会自动在元素内垂直居中，仅适用于单行文本，是最经典、兼容性最好的单行文本垂直居中方式。
适用场景：
按钮、导航栏、单行标题等固定高度且只有一行文字的元素。
完整代码案例<!DOCTYPE
单行文本
.box {
/* 固定元素高度 /
height: 50px;
/ 行高等于元素高度，实现垂直居中 /
line-height: 50px;
/ 可选：设置宽度、背景色方便查看效果 /
width: 300px;
background: #eee;
/ 可选：文本水平居中 */
text-align: center;
}
二、单行 / 多行固定高度文本垂直居中（Flex 法）
方法解释
核心原理：利用 CSS3 弹性布局（Flex），给父元素设置display: flex开启弹性布局，通过align-items: center实现子元素垂直居中，不管文本是单行还是多行，只要父元素高度固定，都能完美居中，是目前最推荐的通用方法。
适用场景
固定高度的卡片、文本框、容器，兼容单行、多行文本，移动端和 PC 端都适用。
三、案例
html

Flex固定高度垂直居中