如何让网格div容器内的每个<i>图标元素实现水平垂直居中

修改后的CSS代码 #

.box {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  /* 新增以下3行实现水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：设置图标大小，优化显示效果 */
  font-size: 32px;
}

补充说明 #

• flex布局是最简洁的元素居中实现方案，align-items: center控制垂直方向居中，justify-content: center控制水平方向居中，兼容所有现代浏览器
• 所有后续拖拽替换新增的元素都是.box的子元素，会自动继承居中规则，不需要额外修改JS逻辑
• 新增的font-size配置可以根据实际需求调整，避免图标显示过大或过小