方案一：Flexbox 居中
核心实现要点
在 Flexbox 布局中，通过设置容器为 display: flex，并使用 justify-content: center 与 align-items: center 可以实现水平和垂直的双向居中，代码简单且直观。
min-height: 100vh 常用于确保容器覆盖整屏，从而让居中效果在不同分辨率下稳定呈现；在内容较多时也可结合 min-height 或 min-content 的策略确保布局可扩展。
兼容性要点：现代浏览器对 Flexbox 的支持十分完善，IE10-11 需要注意旧写法或前缀的兼容性；对于旧环境，考虑提供回退方案或替代布局。若项目需要广泛兼容，务必在 CSS 中提供回退样式。
性能要点：Flexbox 的居中属于布局阶段的轻量操作，通常不会引发复杂的重绘；确保避免在循环中频繁更改布局属性，保持块级元素的尺寸固定可以提升渲染稳定性。
/* CSS（Flexbox 样例） */
.flex-viewport {display: flex;justify-content: center;align-items: center;min-height: 100vh; /* 覆盖整屏 */
}
.flex-content {width: 720px;max-width: 90%;padding: 1rem;box-sizing: border-box;/* 其他视觉样式 */
}
方案二：Grid 布局居中
核心实现要点
利用 Grid 的 place-items: center 属性，可以在一个网格单元内实现水平和垂直双向居中，代码更简洁，适合多种复杂布局的场景。
min-height: 100vh 用于确保网格容器撑满整屏，从而让子项始终处于屏幕中心；在响应式设计中，可以通过 max-width 和 gap 等属性调节外观。
兼容性要点：Grid 在主流浏览器中的支持较好，IE11 提供有限的支持，某些旧版本浏览器可能需要回退方案；对于需要极端兼容的项目，可以结合 Flexbox 作为备选方案。
性能要点：Grid 在单点居中时开销较小，但在大规模网格布局下会带来额外的网格计算；如果只需要居中，优先选择简单的网格配置以减少渲染成本。
/* CSS（Grid 样例） */
.grid-viewport {display: grid;place-items: center;min-height: 100vh;
}
.grid-content {width: 720px;max-width: 90%;
}
方案三：绝对定位 + transform 实现居中
核心实现要点
通过设置父容器为 position: relative，子元素使用 position: absolute，再结合 top: 50%、left: 50% 与 transform: translate(-50%, -50%)，实现精确居中。
兼容性要点：该方案对大多数浏览器都具备良好兼容性，但 transform 在极早期浏览器上可能不被支持；为确保回退，可以在不支持的环境下采用其他居中方案或简单居中策略。
性能要点：此方法对重排的敏感度较低，但若父容器大小变化，子元素定位点会重新计算，需避免频繁的 DOM 插入/移除以降低重排成本；使用 transform 通常能获得较好的 GPU 加速性能。
使用场景提示：当需要绝对定位的浮动层（如模态框、悬浮卡片等）时，此方案能提供可靠的居中效果，并且与动画配合相对方便。
/* CSS（Absolute + Transform 样例） */
.abs-viewport {position: relative;min-height: 100vh;
}
.abs-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 720px;max-width: 90%;
}
