最简十字实现方式是用伪元素::before和::after，父元素设position: relative，::before作横臂（width: 40px; height: 8px; top: 50%; left: 50%; transform: translate(-50%, -50%)）、::after作竖臂（width: 8px; height: 40px; 同样居中），content: ""不可省。
用 border 实现最简十字：两层正方形叠加
纯 CSS 绘制十字，最稳的方式不是画四条线，而是用两个正方形错位叠加。核心思路是：一个横向长条 + 一个纵向长条，中心对齐。
关键在 border 的巧用——给一个正方形元素同时设上下 border 和左右 border，再通过 transform: translate() 分别偏移，就能自然形成十字臂。比伪元素或绝对定位更少依赖父容器尺寸。
- 外层容器设
position: relative，确保子元素能精确定位 - 内层
div宽高设为0，只靠border出形：比如border-top: 20px solid #000; border-bottom: 20px solid #000;就是竖臂；border-left: 20px solid #000; border-right: 20px solid #000;是横臂 - 把横臂用
transform: translateY(-20px)上移，竖臂用transform: translateX(-20px)左移，两者中心就重合了
用伪元素 ::before 和 ::after 避免额外 DOM
如果不想多写一个 div，直接用伪元素是最干净的方案。父元素自身作为定位锚点，两个伪元素分别承担横竖臂。
注意：必须给父元素设 position: relative，否则 absolute 伪元素会相对于 body 定位，容易跑偏。
立即学习“前端免费学习笔记（深入）”；
-
::before做横臂：width: 40px; height: 8px; background: #000; top: 50%; left: 50%; transform: translate(-50%, -50%); -
::after做竖臂：width: 8px; height: 40px; background: #000; top: 50%; left: 50%; transform: translate(-50%, -50%); - 两个伪元素的
content: ""不可省，否则不渲染
响应式十字怎么保持比例不变
固定像素值（如 40px）在缩放或小屏下会失衡。要让十字随容器缩放，得用相对单位 + aspect-ratio 或 vw。
最实用的是基于父容器宽度的计算：width: 10%; height: 10%; 配合 max-width: 40px 防止过大；或者直接用 width: 4vw; height: 4vw;，但要注意小屏下 vw 可能太细，建议加 min-width: 2px。
- 避免用
em，因为会继承字体大小，不可控 - 如果父容器宽高不一致，用
min(width, height)思路：可借助clamp()，例如width: clamp(2px, 5vw, 24px); - CSS 变量配合 JS 动态更新根字号，适合需要频繁重绘的场景（如 SVG 替代方案）
IE11 兼容时别碰 transform 和 aspect-ratio
IE11 不支持 transform: translate() 在伪元素上的可靠表现，也不认 aspect-ratio。这时候得回归老办法：绝对定位 + 百分比偏移。
核心是放弃 translate(-50%, -50%)，改用 top: 50%; left: 50%; margin-top: -20px; margin-left: -20px;（假设臂长 40px），用固定负 margin 拉回中心。
- 必须明确知道臂长像素值，无法响应式，所以 IE11 场景建议用固定尺寸 + 媒体查询降级
-
::before和::after在 IE11 中支持良好，但不能用content: ""以外的值（比如content: "x"会显示文字） - 如果项目已弃用 IE，直接用
grid布局居中：父元素display: grid; place-items: center;，再套两个子元素，更语义化
十字看着简单，但真正要它在各种缩放、嵌套、主题切换下都稳住中心点，border 方案和伪元素方案的 margin/transform 组合稍有偏差就会偏移一两个像素——这点在深色模式下尤其明显。
