双飞翼布局中.main无法通过align-items:center垂直居中，因其基于浮动且父容器非flex上下文；需用定位或外层flex包裹实现，强行在浮动结构中使用现代属性会导致渲染错乱。
双飞翼布局里，.main 不能直接用 align-items: center
双飞翼本质是浮动布局（float），父容器不形成 BFC 或 flex/grid 上下文，所以 display: flex 和 align-items 对 .main 无效——哪怕你给它单独加，也只作用于它自己的子元素，不是让它在父容器里垂直居中。
想让 .main 垂直居中，必须脱离浮动流，改用定位或 flex 包裹
双飞翼结构本身不提供垂直对齐能力，得靠额外层干预。常见做法是：
- 给
.wrap（即包裹.main的那层）设position: relative，再把.main改成position: absolute; top: 50%; transform: translateY(-50%) - 或者更稳妥：把整个双飞翼结构包进一个新容器，设
display: flex; align-items: center; justify-content: center;，然后让.wrap+ 左右栏作为 flex 子项（此时需清除浮动，否则会干扰 flex 布局） - 若内容高度固定，可在
.main内部用line-height= 高度 +text-align: center实现单行文本“视觉居中”，但换行就失效
margin: auto 在双飞翼里对垂直方向完全无效
浮动元素的 margin: auto 只在水平方向有居中效果，垂直方向被浏览器忽略。你写 margin: auto 0 或 margin: auto，.main 依然贴顶。这不是 bug，是 CSS 规范明确规定的浮动行为。
真正能稳住的方案：用现代布局重包，而不是硬改双飞翼
双飞翼是为解决 IE6/7 下两栏自适应而生的 hack，2026 年还强撑它做垂直居中，代价远大于收益。建议：
立即学习“前端免费学习笔记（深入）”；
- 保留双飞翼 HTML 结构（兼容旧逻辑），但用
display: flex重写父容器样式，把.left、.main、.right当 flex 项目处理 - 删掉所有
float和负margin，用flex: 0 0 300px控制左右栏，flex: 1给中间栏 - 此时
align-items: center就能自然生效，且无 Safari margin 冲突问题
老代码里最常被忽略的，是以为“结构没变，只改 CSS 就行”，结果浮动和 flex 混用导致渲染错乱——必须彻底清浮动，或彻底弃用浮动。
