Web开发新手求助：如何在CSS六边形中居中放置React Icons

我是Web开发新手，尝试用CSS实现将5个React Icons放置在六边形中心，但未能成功。以下是我尝试的代码：

原代码 #

HTML #

<div class="hexagon">
    <{iconname/>
    <{iconname/>
    <{iconname/>
    <{iconname/>
    <{iconname/>
</div>

CSS #

.hexagon {
  position: relative;
  width: 200px;
  height: 150px;
  background: #4da6ff;
  transform: r`otate(90deg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

修复方案 #

1. 修正语法错误 #

首先修复CSS里transform属性的笔误，去掉多余的反引号：

transform: rotate(90deg);

2. 使用布局实现图标居中 #

根据需求，有两种常见布局方式：

方式一：图标紧凑居中（横向排列）

通过Flexbox让图标在六边形内垂直水平居中：

.hexagon {
  position: relative;
  width: 200px;
  height: 150px;
  background: #4da6ff;
  transform: rotate(90deg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Flexbox居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 图标间距 */
}

/* 统一图标样式 */
.hexagon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

对应的React HTML要修正组件写法（React中类名用className，图标组件要闭合标签）：

<div className="hexagon">
  <IconName />
  <IconName />
  <IconName />
  <IconName />
  <IconName />
</div>

方式二：中心+四周分布（匹配示例图布局）

用Grid布局实现1个图标在中心，4个在上下左右的分布：

.hexagon {
  position: relative;
  width: 200px;
  height: 150px;
  background: #4da6ff;
  transform: rotate(90deg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Grid布局 */
  display: grid;
  grid-template-areas: 
    ". top ."
    "left center right"
    ". bottom .";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* 分配图标位置 */
.hexagon svg:nth-child(1) { grid-area: center; }
.hexagon svg:nth-child(2) { grid-area: top; }
.hexagon svg:nth-child(3) { grid-area: right; }
.hexagon svg:nth-child(4) { grid-area: bottom; }
.hexagon svg:nth-child(5) { grid-area: left; }

/* 统一图标样式 */
.hexagon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
  justify-self: center;
  align-self: center;
}

内容的提问来源于stack exchange，提问作者user 1997