css 环绕中心点平均分布布局

要实现CSS环绕中心点平均分布布局，你可以使用flexbox布局或者grid布局。下面我将为你提供两种方法。

方法一：使用flexbox布局
首先，创建一个父容器，并将其设置为flex布局，并使用justify-content和align-items属性将内容水平和垂直居中。
然后，为父容器中的每个子元素设置flex属性为1，这将使它们平均分布。
最后，使用transform属性将子元素向外移动一定的距离，以实现环绕中心点的效果。

HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  transform: translateX(-50%);
}

方法二：使用grid布局
首先，创建一个父容器，并将其设置为grid布局，并使用place-items属性将内容水平和垂直居中。
然后，为父容器中的每个子元素设置grid-column和grid-row属性为1，这将使它们平均分布。
最后，使用transform属性将子元素向外移动一定的距离，以实现环绕中心点的效果。

HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS样式：

.container {
  display: grid;
  place-items: center;
}

.item {
  grid-column: 1;
  grid-row: 1;
  transform: translateX(-50%);
}

这两种方法都可以实现环绕中心点平均分布布局，你可以根据自己的需求选择其中一种。希望能对你有所帮助！