React中文本或图标居中：图标置于两盒子中央的技术求助

方案1：Flexbox 实现并排盒子间的图标居中 #

适合两个盒子横向排列，图标位于两者中间（水平+垂直居中）的场景。

HTML 结构 #

<div class="container">
  <div class="box">盒子1</div>
  <i class="icon">📌</i>
  <div class="box">盒子2</div>
</div>

CSS 样式 #

.container {
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向整体居中 */
  gap: 2rem; /* 控制盒子与图标的间距 */
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 1.5rem;
}

方案2：Grid 布局实现精准居中 #

通过网格列定义，让图标占据中间列，自然实现居中。

HTML 结构 #

<div class="grid-container">
  <div class="box">盒子1</div>
  <i class="icon">📌</i>
  <div class="box">盒子2</div>
</div>

CSS 样式 #

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 1.5rem;
}

方案3：绝对定位实现重叠盒子的中央图标 #

如果需要图标覆盖在两个重叠盒子的交叉中心，用绝对定位+transform 实现。

HTML 结构 #

<div class="relative-container">
  <div class="box overlap-box">盒子1</div>
  <div class="box overlap-box">盒子2</div>
  <i class="icon center-icon">📌</i>
</div>

CSS 样式 #

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

.overlap-box {
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  margin: 0 -25px; /* 调整负值让盒子重叠 */
  background: #fff;
}

.center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 精准居中 */
  font-size: 1.5rem;
  z-index: 1; /* 确保图标在盒子上方 */
}

内容的提问来源于stack exchange，提问作者Honey Singh