CSS 布局技巧速查
CSS 布局技巧速查：居中、两栏三栏、响应式等 20 个实用方案。
纯浏览器本地运行，数据不上传服务器
| 场景 | 方案 |
|---|---|
| 水平居中 | margin: 0 auto + 定宽 |
| flex 居中 | display:flex; align-items:center; justify-content:center |
| grid 居中 | display:grid; place-items:center |
| 垂直居中（绝对） | top:50%; transform:translateY(-50%) |
| 两栏布局 | flex: 左固定 + 右 flex:1 |
| 三栏布局 | grid-template-columns: 200px 1fr 200px |
| 圣杯/双飞翼 | 中间自适应，两侧固定 |
| 等高列 | flex 默认等高 |
| 粘性页脚 | flex 布局 + min-height:100vh |
| sticky 定位 | position:sticky; top:0 |
| 响应式断点 | @media (max-width: 768px) |
| 移动优先 | 默认移动样式 + min-width 渐进增强 |
| 隐藏元素 | display:none（移除）/ visibility:hidden（占位） |
| 文字溢出省略 | text-overflow:ellipsis + overflow:hidden + nowrap |
| 多行省略 | -webkit-line-clamp:2 |
| 滚动条美化 | ::-webkit-scrollbar 定制 |
| 平滑滚动 | scroll-behavior:smooth |
| aspect-ratio | 固定宽高比 |
| 容器查询 | @container 响应容器尺寸 |
| CSS 变量 | --var: value; var(--var) |
使用说明
- 速查常见布局问题的最佳实践。
- 搜索支持按场景或方案过滤。
- 写页面布局时快速参考，避免踩坑。
常见问题
居中用 flex 还是 grid？
单元素居中两者皆可；现代推荐 grid 的 place-items:center 更简洁。
为什么 vertical-align 不生效？
vertical-align 只对行内元素生效；块级元素垂直居中用 flex/grid。