如何实现圆形Div内图标居中？多种布局尝试未生效

问题核心在于承载图标的红、黄、绿圆形Div本身未设置居中布局，你之前的.centerIcon类仅作用于父容器，没有覆盖到这些圆形元素。另外Bootstrap Icons自带的字体属性也可能导致微小偏移，需要额外调整。

修复方案 #

1. 给所有圆形Div添加.centerIcon类（或直接在它们的CSS规则中加入居中布局属性）
2. 调整图标字体大小与垂直对齐规则，适配圆形尺寸

修改后的完整代码 #

HTML

<div class="iconDivHeadSubOne centerIcon">
  <div class="redCircle centerIcon"><i class="bi bi-x"></i></div>
  <div class="yellowCircle centerIcon">
    <i class="bi bi-dash"></i>
  </div>
  <div class="greenCircle centerIcon">
    <i class="bi bi-chevron-expand"></i>
  </div>
</div>

<div class="iconHead">
  <div class="iconDivHeadOne centerIcon">
    <div class="iconDivHeadSubOne centerIcon">
      <div class="redCircle centerIcon"><i class="bi bi-x"></i></div>
      <div class="yellowCircle centerIcon">
        <i class="bi bi-dash"></i>
      </div>
      <div class="greenCircle centerIcon">
        <i class="bi bi-chevron-expand"></i>
      </div>
    </div>
    <div class="iconDivHeadSubTwo centerIcon">
      <i class="bi bi-layout-split gapAndSizing"></i>
      <div add left boarder to item></div>
      <i class="bi bi-chevron-down"></i>
    </div>
    <div class="iconDivHeadSubThree centerIcon">
      <i class="bi bi-chevron-left gapAndSizing"></i>
      <i class="bi bi-chevron-right gapAndSizing"></i>
    </div>
  </div>
  <div class="iconDivHeadTwo">
    <i class="bi bi-shield-shaded gapAndSizing"></i>
    <input
      type="url"
      placeholder="chrisfoehser.com/About-Me"
      id="urlInput"
    />
  </div>
  <div class="iconDivHeadThree">
    <i class="bi bi-box-arrow-up gapAndSizing"></i>
    <i class="bi bi-plus-lg gapAndSizing"></i>
    <i class="bi bi-grid gapAndSizing"></i>
  </div>
</div>

CSS

.centerIcon {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.redCircle {
  width: 15px;
  height: 15px;
  background: rgb(255, 76, 68);
  border-radius: 50%;
  margin: 7px;
  color: black;
  font-size: 10px; /* 适配圆形尺寸，避免图标超出 */
  line-height: 1; /* 消除字体默认行高的垂直偏移 */
}

.yellowCircle {
  width: 15px;
  height: 15px;
  background: rgb(255, 190, 0);
  border-radius: 50%;
  margin: 7px;
  color: black;
  font-size: 10px;
  line-height: 1;
}

.greenCircle {
  width: 15px;
  height: 15px;
  background: #2ecc71; /* 补充绿色背景色 */
  border-radius: 50%;
  margin: 7px;
  color: black;
  font-size: 10px;
  line-height: 1;
}

原理说明 #

• 圆形Div作为图标的直接父元素，必须通过display: flex+justify-content: center+align-items: center实现水平/垂直双向居中
• 调整font-size是因为Bootstrap Icons默认尺寸可能超出15px圆形范围，导致视觉偏移；line-height:1可消除字体默认行高带来的错位

内容的提问来源于stack exchange，提问作者Chris Foehser