使用line-height可实现单行文本垂直居中，适用于固定高度容器；对于多行内容或复杂布局，推荐使用flex布局，通过align-items和justify-content实现灵活的垂直居中效果。
在CSS中实现内容垂直居中确实让很多开发者感到困扰，尤其是当容器高度不确定或内容动态变化时。不过，通过合理使用 line-height 或 flex 属性，可以轻松解决大多数垂直居中问题。
使用 line-height 实现单行文本垂直居中
当容器高度固定且内容为单行文本时，line-height 是最简单有效的方案。
将 line-height 的值设置为与容器的 height 相同，文本就会垂直居中。
例如：如果一个 div 高度是 40px，设置 line-height: 40px; 即可让其中的单行文字垂直居中。
立即学习“前端免费学习笔记（深入）”；
注意：这种方法只适用于单行文本，多行文本会导致行间距异常。
使用 flex 布局实现灵活的垂直居中
对于更复杂的情况，比如多行文本、图片或其他块级元素，推荐使用 Flexbox 布局。
只需将父容器设置为 flex，并使用 align-items 和 justify-content 属性即可同时实现水平和垂直居中。
常用写法：- display: flex;
- align-items: center; /* 垂直居中 */
- justify-content: center; /* 水平居中（可选） */
这种方式兼容性好，支持现代浏览器，能适应各种尺寸的内容，是目前最推荐的做法。
选择合适的方法取决于场景
如果是按钮或导航栏中的单行文字，用 line-height 简洁高效。
如果是卡片、弹窗或需要包含多个元素的区域，flex 更加灵活可靠。
基本上就这些，掌握这两个方法，大部分垂直居中问题都能迎刃而解。
