如何实现元素的水平垂直居中？

【概念释义】

水平垂直居中 指让元素在父容器内沿主轴与交叉轴都处于视觉中心。实现方式取决于：元素是行内还是块级、是否已知宽高、父级尺寸是否固定、是否需要兼容旧浏览器。

现代面试应优先讲 Flexbox 与 Grid，再补充 transform + 绝对定位 等经典方案，并说明各自适用边界。

【基础使用】

方案 1：Flex（推荐，未知宽高也适用）

<div class="parent">
  <div class="child">居中内容</div>
</div>

.parent {
  width: 320px;