css圆形布局内容居中

如示意图，需要圆形布局内容居中，需要使用css和jquery，
外圈内容是动态的，也就是说是根据请求获取到再组装的，我的想法是计算出坐标再渲染页面？或者有无其他更好的办法
不知道各位有什么思路可以帮忙提供或者源码参考的吗？谢谢了

使用旋转，只需计算角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            position: relative;
            margin: 200px;
            width: 200px;
            height: 200px;
        }
        .wrap .center-wrap {
            width: 100%;
            height: 100%;
            background-color: #4472c4;
            border-radius: 50%;
        }
        .wrap .around-wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .wrap .around-wrap .around-item {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 40px;
            background-color: #4472c4;
        }
        .wrap .around-wrap .around-item:nth-child(1) {
            transform: translate(-50%, -50%) rotate(0deg) translateY(-180px) rotateZ(0deg);
        }
        .wrap .around-wrap .around-item:nth-child(2) {
            transform: translate(-50%, -50%) rotate(45deg) translateY(-180px) rotateZ(-45deg);
        }
        .wrap .around-wrap .around-item:nth-child(3) {
            transform: translate(-50%, -50%) rotate(90deg) translateY(-180px) rotateZ(-90deg);
        }
        .wrap .around-wrap .around-item:nth-child(4) {
            transform: translate(-50%, -50%) rotate(135deg) translateY(-180px) rotateZ(-135deg);
        }
        .wrap .around-wrap .around-item:nth-child(5) {
            transform: translate(-50%, -50%) rotate(180deg) translateY(-180px) rotateZ(-180deg);
        }
        .wrap .around-wrap .around-item:nth-child(6) {
            transform: translate(-50%, -50%) rotate(225deg) translateY(-180px) rotateZ(-225deg);
        }
        .wrap .around-wrap .around-item:nth-child(7) {
            transform: translate(-50%, -50%) rotate(270deg) translateY(-180px) rotateZ(-270deg);
        }
        .wrap .around-wrap .around-item:nth-child(8) {
            transform: translate(-50%, -50%) rotate(315deg) translateY(-180px) rotateZ(-315deg);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="center-wrap"></div>
        <div class="around-wrap">
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
            <div class="around-item"></div>
        </div>
    </div>
</body>
</html>

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以看下这个问题的回答https://ask.csdn.net/questions/271595
这篇博客你也可以参考下：如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
您还可以看一下陶国荣老师的2小时快速开发课：使用 jQuery 开发移动端相册页课程中的元素的缩放比例小节, 巩固相关知识点
除此之外, 这篇博客: JQuery 中$（）后面的括号里的内容什么时候加引号，什么时候不加中的 四、单双引号是一样的用法bai，没有区别，不过要注意他们必须是成对出现，还有一个需要注意的是：如果是嵌套的话就必须是单双间隔成对出现。 部分也许能够解决你的问题。
以下回答由chatgpt基于相关博客总结生成:
如何使用CSS和jQuery实现圆形布局内容的居中？
要实现圆形布局内容的居中，可以通过CSS和jQuery来操作DOM元素以及样式属性来实现。以下是一个可能的解决方案：
1. 使用CSS样式来定义圆形布局和内容的样式。首先给外圈容器设置一个固定的宽高比，以确保是一个圆形。然后使用flex布局来让内容水平垂直居中。
css .circle-container { width: 400px; height: 400px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
1. 使用jQuery来动态生成圆形布局的内容并插入到DOM中。可以使用jQuery的append()方法将生成的内容插入到圆形布局容器中。具体的内容生成可以根据请求来动态生成。
javascript var content = '<div class="circle-content">Hello World</div>'; $('.circle-container').append(content);
1. 使用jQuery来计算并设置圆形布局内容的位置。根据圆形布局的半径和内容的宽高，可以使用一些特定的公式来计算内容在圆形中的位置，并设置相应的样式属性。
```javascript var container = $('.circle-container'); var content = $('.circle-content'); var radius = container.width() / 2; var contentWidth = content.width(); var contentHeight = content.height();
var contentLeft = radius - contentWidth / 2; var contentTop = radius - contentHeight / 2;
content.css({ left: contentLeft, top: contentTop }); ```
这样，通过CSS和jQuery的结合，就可以实现圆形布局内容的居中显示。以上是一种可能的解决方案，具体实现还需要根据具体需求来进行调整。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

css圆形布局内容居中

如何使用CSS和jQuery实现圆形布局内容的居中？