文本垂直居中对齐
" />
通过将 设置为 Flex 容器并启用 align-items: center，可使 ::after 生成的装饰性内容（如圆点）与文本基线自然对齐，解决默认行内布局导致的错位问题。
通过将 `
` 设置为 flex 容器并启用 `align-items: center`，可使 `::after` 生成的装饰性内容（如圆点）与文本基线自然对齐，解决默认行内布局导致的错位问题。
默认情况下，:after 伪元素以 inline 方式渲染，其垂直对齐遵循文本的基线（baseline），而大号字体（如 font-size: 75px）会导致伪元素整体上移，视觉上“悬浮”于标题文字上方——这正是截图中出现的问题。仅靠 margin-top 无法可靠修正，因为 margin 在 inline 模式下对垂直定位影响有限，且易受行高、字体度量等隐式因素干扰。
✅ 推荐解决方案：将 设为 Flex 容器
.mastermega h1 {
font-family: 'MagicRetro';
color: #353935;
font-size: 36px;
margin-left: 5px;
display: flex; /* 启用 Flex 布局 */
align-items: center; /* 垂直居中对齐子项（含 ::after） */
/* 注意：避免设置 height 或 line-height，以免干扰对齐 */
}
.mastermega h1::after {
content: "• • • •";
font-size: 75px;
color: rgba(246, 139, 187, 0.8);
margin-left: 30px;
/* 可选：添加 vertical-align: middle 不再必要，flex 已接管对齐 */
}
? 关键说明：
- display: flex 将
的内容（文本节点 + ::after 伪元素）视为 Flex 子项；
- align-items: center 使所有子项在交叉轴（即垂直方向）上居中对齐，无论字号差异多大；
- 无需 position: relative（原代码中无效，因 ::after 默认非定位元素，且 relative 不改变文档流中的对齐逻辑）；
- 若需微调间距，优先使用 gap（如 gap: 30px）替代 margin-left，语义更清晰。
⚠️ 注意事项：
- 确保浏览器兼容性（Flexbox 支持所有现代浏览器及 IE10+）；
- 避免在 h1 上同时设置 line-height 或 height，可能挤压或破坏 Flex 对齐效果；
- 如需响应式适配，可对 font-size 和 gap 使用 rem 或 clamp()，保持比例协调。
此方法简洁、语义明确、鲁棒性强，是现代 CSS 中处理此类垂直对齐问题的标准实践。
