HTML 与 CSS · 主观题 · 第 8 题
前端与全栈开发面试 · 第 8 题
实现元素水平垂直居中有哪些方法?各有什么适用条件?
参考答案
1. Flex:父元素 display: flex; justify-content: center; align-items: center;,最常用,不需要知道子元素尺寸。
2. Grid:父元素 display: grid; place-items: center;,写法最短。
3. 绝对定位 + transform:子元素 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);,不需要知道尺寸,但脱离文档流。
4. 绝对定位 + margin: auto:子元素 position: absolute; inset: 0; margin: auto;,需要子元素有明确的宽高。
5. 单行文本:line-height 等于容器高度,再加 text-align: center。
6. 行内块元素:父元素 text-align: center,配合 vertical-align: middle 和辅助元素,属于较老的写法。
7. 选择:现代项目优先 flex 或 grid;弹窗、浮层常用绝对定位 + transform。
解析
至少答出 flex、grid、绝对定位三类,并说明是否需要知道尺寸。