- 正确答案：垂直居中是指将一个元素在其父容器中沿垂直方向（Y轴）居中对齐。实现方式取决于元素是否已知高度、是否为行内元素、是否需要兼容旧浏览器，以及是否结合水平居中。现代推荐方案是使用 Flexbox 或 Grid；传统方案包括绝对定位 + transform、table-cell、line-height（仅限单行文本）等。 - 解答思路：首先明确问题边界——是块级元素还是行内元素？父容器是否有固定高度？是否需支持 IE10 以下？然后根据约束条件选择最合理、语义清晰、可维护性强的方案。优先考虑 CSS 逻辑而非 hack，兼顾可访问性与响应式表现。 - 深度知识讲解： 1. **Flexbox 方案（推荐）**：底层原理：Flex 容器通过主轴（main axis）和交叉轴（cross axis）控制子项排列。设置 align-items: center 即让所有 flex item 在交叉轴（默认为 Y 轴）上居中。若需单个子项居中且不干扰其他元素，可用 align-self: center。关键点：flex 容器必须有明确高度（或能撑开高度），否则“居中”无参照基准；但即使父容器高度由内容决定（min-height: 0），只要其自身在更高层上下文中具有有效高度，仍可生效。伪代码式 CSS： ``` .parent { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 可选：水平居中 */ height: 300px; /* 必须有有效高度（非 auto，除非父级已定高） */ } .child { } ``` 2. **CSS Grid 方案（同样推荐）**：底层原理：Grid 是二维布局系统，通过定义网格线/区域，配合 place-items 或 align-items + justify-items 实现精准定位。place-items: center 等价于 align-items: center; justify-items: center。优势：无需关心子元素是否为 flex item，天然支持多子元素独立定位；可与 grid-area、fr 单位结合实现响应式流体布局。示例： ``` .parent { display: grid; place-items: center; height: 400px; } ``` 3. **绝对定位 + transform（兼容性广，但需相对定位父容器）**：底层原理：position: absolute 脱离文档流后，top: 50% 将元素上边缘置于父容器垂直中点；transform: translateY(-50%) 将自身向上平移自身高度的 50%，从而实现视觉中心对齐。该方案依赖于浏览器对 transform 的像素级渲染精度（现代浏览器均支持 subpixel rendering）。注意：若子元素高度动态（如文字换行、图片加载中），需确保 transform 计算时 DOM 已就绪；否则可能产生偏移。可通过 getBoundingClientRect() 在 JS 中动态修正（较少用）。示例： ``` .parent { position: relative; height: 300px; } .child { position: absolute; top: 50%; transform: translateY(-50%); } ``` 4. **table-cell + vertical-align（古老但稳定）**：底层原理：将父容器设为 display: table-cell，触发表格单元格渲染模型，此时 vertical-align: middle 生效——它使行内内容（包括匿名行框）在单元格内垂直居中。该机制基于 CSS2.1 表格格式化模型，不依赖 JavaScript，且对未知高度内容鲁棒。缺陷：语义失真（非表格数据却用 table 语义），且父容器无法同时使用 padding/margin 等常规块级布局属性；嵌套复杂时易引发 box-sizing 和 line-height 干扰。示例： ``` .parent { display: table-cell; vertical-align: middle; height: 300px; width: 300px; } ``` 5. **line-height（仅限单行纯文本）**：底层原理：当元素为 inline 或 inline-block 且仅含单行文本时，设置 line-height 等于容器高度，可使文本行框在容器中垂直居中（因行框高度 = line-height，且 baseline 对齐规则使文本自然居中）。局限性极大：不适用于图片、多行文本、flex 子项；若 font-size 改变或字体 metrics 不同（如中英文混排），可能出现微偏移；line-height 还会影响行间距语义。示例： ``` .parent { height: 60px; line-height: 60px; text-align: center; /* 配合水平居中 */ } .child { display: inline-block; vertical-align: middle; /* 可选，增强容错 */ } ``` - 扩展知识： • 浏览器渲染流程视角：垂直居中本质是 layout 阶段的几何计算问题。Flex/Grid 在 layout 阶段直接参与主轴/交叉轴尺寸分配；而 absolute + transform 是在 paint 前通过合成层矩阵变换实现视觉居中，不改变 layout box 位置。 • 可访问性影响：Flex/Grid 居中不改变 DOM 顺序和语义，屏幕阅读器按源码顺序读取；而 absolute 定位若脱离正常流过早，可能影响焦点顺序（需配合 tabindex 或 aria-hidden 合理处理）。 • 性能差异：transform 属于合成属性（composited property），通常走 GPU 加速，重绘成本低；而修改 height、margin 等触发布局（layout）和重绘（paint），性能开销大。 • 新兴方案：CSS Anchor Positioning（草案）未来可能支持基于锚点的精确定位，例如 anchor-name + position-anchor，但目前无主流浏览器支持。 - 代码示例（完整 HTML + CSS，Flex 方案）： ```

Hello World

```

快手26秋招前端一面

全站热榜

创作者周榜