水平垂直居中有哪些写法？圣杯、双飞翼和 sticky footer 现在怎么实现？
先理解原理和示例，再练习完整口述与追问。
回答要点
首选 Flex 或 Grid；绝对定位配合 transform 适合覆盖层；单行文本可用 line-height。圣杯和双飞翼是早期用浮动加负边距实现“两侧定宽、中间自适应且主内容先加载”的方案，今天用 Grid 或 Flex 即可。sticky footer 用列方向 Flex 或三行 Grid。
原理拆解
Flex 容器设置 justify-content 与 align-items 分别控制主轴和交叉轴对齐；Grid 的 place-items: center 同时设置两个方向。绝对定位用 top: 50%; left: 50% 把左上角移到中心，再用 transform: translate(-50%, -50%) 按自身尺寸回退，不需要知道宽高；inset: 0; margin: auto 适合已知尺寸或 fit-content 的元素。
圣杯与双飞翼都把中间栏放在 DOM 最前面，让主内容先解析，再用浮动、负外边距和 padding（圣杯）或内部 margin（双飞翼）把两侧栏拉回位置。这些技巧在缺少 Flex/Grid 的年代必要，现在会增加维护难度。
示例与推演
.center { display: grid; place-items: center; }
.layout {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 200px;
}
.page {
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
}
三栏布局中间列用 minmax(0, 1fr)，防止长单词或表格把中间列撑出容器；page 让页脚在内容少时贴底，内容多时被自然推下去。100dvh 写在后面，不支持的浏览器回退到 100vh。
易错点
用 order 或 Grid 区域只改变视觉顺序，屏幕阅读器和 Tab 顺序仍按 DOM，DOM 顺序要符合阅读逻辑。transform 居中在奇数尺寸下可能出现半像素模糊。
参考回答可直接练习口述
居中我首选 Flex 或 Grid，覆盖层用绝对定位加 translate。圣杯和双飞翼是早期用浮动和负边距实现三栏、并让主内容先加载的技巧，现在用 Grid 的三列模板就够了，中间列用 minmax(0, 1fr) 防撑宽。页脚贴底用三行 Grid 或列方向 Flex，让主体占满剩余空间；同时保证 DOM 顺序符合阅读顺序。