经典八股，适合初学者（）
CSS vertical alignment: Best practices and examples
AI 总结：文章介绍了CSS垂直对齐的多种方法，包括Flexbox、Grid、绝对定位和基于表格的方法。Flexbox和Grid提供灵活且响应式方案，而绝对定位和表格方法则在兼容性方面有优势。文章详细比较了每种方法的优缺点、浏览器兼容性和适用场景，并提供了代码示例和可交互的CodePen链接。最后，文章也讨论了垂直对齐对可访问性和可读性的影响，建议在长文本中尽量避免使用垂直对齐，并优先选择Flexbox或Grid以确保响应式布局。
1. CSS垂直对齐的背景与挑战
• 早期CSS缺乏直接垂直居中的方法，开发者常依赖JavaScript或Hack方案（如table-cell）。
• 现代CSS（Flexbox、Grid等）提供了更简单、灵活的解决方案。
2. 垂直对齐的定义
• 顶部对齐（Top）：元素紧贴容器顶部。
• 居中对齐（Middle）：元素与容器顶部和底部距离相等。
• 底部对齐（Bottom）：元素紧贴容器底部。
3. 关键技术与示例
• Flexbox：
• align-items: center（垂直居中）、justify-content: center（水平居中）。
• align-self控制单个项目对齐。
• margin: auto实现快速居中（仅限单个元素）。
• Grid：
• place-items: center（单行代码实现居中）。
• grid-row精确控制行位置。
• 绝对定位：
• top: 50% + transform: translateY(-50%)经典方案。
• position: absolute + margin: auto（需固定高度）。
• 传统方法：
• vertical-align：适用于行内元素或表格单元格。
• line-height：单行文本居中（需匹配容器高度）。
• 伪元素法：通过::before和::after分配空间（较少用）。
4. 注意事项
• 无障碍性：垂直对齐文本可能影响阅读障碍用户，建议仅用于标题等短内容。
• 响应式设计：优先选择Flexbox/Grid，避免传统方法（如table-cell）的兼容性问题。
• 浏览器兼容性：Flexbox/Grid需注意部分旧版本浏览器的前缀支持（如Safari 7-8）。
5. 结论
• 推荐方案：Flexbox和Grid是现代布局的首选，兼顾灵活性与响应式。
• 兼容性场景：绝对定位或vertical-align可作为备选。
• 开发者建议：根据具体需求（如元素类型、布局复杂度）选择合适方法。
提示：文章包含交互式CodePen示例（原文链接可查看），帮助直观理解不同技术的效果。
via Facundo Corradini
