鼠标悬停图片时放大覆盖层无法居中问题求助

咱们先拆解下现有代码里的问题：

• .icon 重复定义了 width 属性，且高度设为60px和目标的65x65正方形不符，容器尺寸混乱会直接影响覆盖层的定位
• .overlay 同时设置了 top:0; left:0; 和 margin:5px，再搭配 width:100%，相当于覆盖层的实际宽度是容器宽度+10px（左右margin各5），不仅没法居中还会超出容器范围

下面给你两个实用的修复方案，选一个顺手的就行：

方案一：用 transform 实现精准居中（推荐） #

这是绝对定位场景下最稳定的居中方式，适配各种容器尺寸：

修改后的CSS代码：

/* 先修正.icon的容器尺寸，确保是65x65正方形 */
.icon{ 
  position: relative; 
  width:65px; 
  height:65px; 
  display: inline-block; 
  margin: 5px; 
}

/* 重构overlay的定位逻辑 */
.overlay{ 
  position:absolute; 
  text-align: center; 
  /* 可按需调整覆盖层大小，这里预留10px边距 */
  width: calc(100% - 10px); 
  height:calc(100% - 10px); 
  opacity: 0; 
  /* 用flex让覆盖层内部文字也垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 核心居中代码：让覆盖层中心和容器中心对齐 */
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  background-color: #3b5998; 
  border-radius:50px; 
}

额外补充hover效果（让放大和覆盖层显示联动）：

.icon:hover .overlay{
  opacity: 0.8; /* 透明度可按需调整 */
}

方案二：用 margin:auto 实现居中 #

如果不想用transform，也可以通过绝对定位+自动margin实现：

.icon{ 
  position: relative; 
  width:65px; 
  height:65px; 
  display: inline-block; 
  margin: 5px; 
  /* 防止覆盖层超出容器范围 */
  overflow: hidden;
}

.overlay{ 
  position:absolute; 
  text-align: center; 
  width: calc(100% - 10px); 
  height:calc(100% - 10px); 
  opacity: 0; 
  /* 让单行文字垂直居中 */
  line-height: calc(100% - 10px);
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  /* 自动分配剩余空间实现居中 */
  margin: auto; 
  background-color: #3b5998; 
  border-radius:50px; 
}

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