圆形排列本质是用CSS将元素按极坐标定位到假想圆周上，推荐绝对定位+三角函数计算left/top坐标，配合transform: translate(-50%,-50%)居中锚点，动态JS生成更高效。
用 CSS transform + 定位实现圆形排列
HTML5 本身没有“圆形布局”这个布局模式，所谓圆形排列，本质是用 CSS 将若干 手写每个 for (let i = 0; i < count; i++) {
const angle = (i / count) 2 Math.PI; // 弧度
const x = centerX + radius Math.cos(angle);
const y = centerY + radius Math.sin(angle); const item = document.createElement('div');
item.className = 'circle-item';
item.style.position = 'absolute';
item.style.left = 注意： 一旦窗口缩放，固定像素半径会让布局挤压或空旷。必须监听 立即学习“前端免费学习笔记（深入）”； 这不是代码 bug，而是坐标计算没对齐锚点或父容器未设限制： 最稳的做法：始终以 transform: rotate() 和 translate() 组合，或直接用 position: absolute 配合三角函数计算 left/top。
Math.sin()/Math.cos() 动态计算坐标，控制精度高、兼容性好（IE10+ 也支持）rotate() 套嵌：子元素会继承旋转，导致内部文字/图标也歪斜，需额外 rotate(-θ) 反向矫正，易出错top: 50%; left: 50%; transform: translate(-50%, -50%)，否则坐标系偏移难对齐JavaScript 动态生成圆形子元素的最小可行代码
style 属性太累，用 JS 算坐标更实际。以下是在父容器 #circle-container 内均匀排 8 个项的典型写法：const container = document.getElementById('circle-container');
const count = 8;
const radius = 150; // 半径像素值
const centerX = 0;
const centerY = 0;
${x}px;
item.style.top = ${y}px;
item.style.transform = 'translate(-50%, -50%)'; // 居中自身锚点
container.appendChild(item);
}
left/top 是相对于父容器左上角的，所以 centerX/centerY 设为 0，前提是父容器已用 position: relative 且自身居中；否则要先获取父容器真实中心偏移再代入。响应式圆形布局的关键调整点
resize 并重算半径和坐标，或改用视口单位：
vw 或 vmin 替代 px：例如 radius = 20vmin，随屏幕等比缩放width/height，子元素尺寸也建议用 em 或 rem
font-size: clamp(0.75rem, 4vw, 1rem) 控制字号范围aspect-ratio 做圆形容器——它不解决定位问题，只是让单个元素成圆常见错误：元素飞出可视区或重叠
position: relative，导致 absolute 子元素相对整个页面定位transform: translate(-50%, -50%)，结果是以左上角为原点画圆，视觉严重偏右下% 单位配合 left/top 时，百分比是相对于父容器宽高，不是圆心，容易误算px 或 vmin 算坐标，父容器设 overflow: visible 初期调试，确认位置后再加 overflow: hidden 或遮罩。
