CSS问题：页面宽度较小时hover触发元素垂直下拉

你的问题根源出在这几个CSS设置上，直接导致小屏幕布局异常：

• .info-div 的 margin-top: auto 会在flex容器里把这个元素推到容器底部，小屏幕空间不足时就会带动整个区域下移
• hover时给 .info-icon 加的 position: relative; top: 10.6rem 会让图标自身下移，干扰flex布局的对齐
• 弹出的 .hidden-info 用了 position: relative，它会占据文档流空间，撑开容器高度，导致Logo跟着下拉

直接修改CSS就能解决，不用媒体查询：

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 0rem;
  scroll-behavior: smooth;
}
.ten-green-logo {
  max-width: 40%;
  animation: transitionIn 1s;
  padding-right: 1rem;
}

/* 去掉margin-top: auto，让图标和Logo水平对齐，同时设为定位父容器 */
.info-div {
  width: 2rem;
  position: relative;
}

.info-icon {
  width: 2rem;
  animation: transitionIn 1s;
  cursor: pointer; /* 加光标提示，提升交互感 */
}

.hidden-info {
  display: none;
}

/* 弹出框改为绝对定位，脱离文档流，不影响原有布局 */
.info-icon:hover + .hidden-info {
  display: block;
  position: absolute;
  background-color: white;
  padding: 0.6rem;
  border-radius: 5%;
  width: 20rem;
  font-size: 80%;
  /* 基于info-div水平居中，显示在图标下方 */
  left: 50%;
  transform: translateX(-50%);
  top: 2.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 加阴影提升视觉层次 */
}

/* 移除hover时的相对定位，避免图标移动干扰布局 */
/* .info-icon:hover {
  position: relative;
  top: 10.6rem;
} */

@keyframes transitionRight {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(2rem);
  }
}

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}

修改说明：

1. 移除 .info-div 的 margin-top: auto，让它和Logo保持水平居中对齐，不会被推到底部
2. 给 .info-div 加 position: relative，让弹出框的绝对定位基于这个容器，避免位置错乱
3. 把 .hidden-info 改成 position: absolute，脱离文档流后不会撑开容器，也就不会导致Logo下移
4. 调整弹出框的定位参数，用 left:50% + transform: translateX(-50%) 实现水平居中，top:2.5rem 让它显示在图标下方
5. 删除 .info-icon:hover 里的相对定位代码，避免图标移动干扰布局
6. 额外添加光标提示和阴影，优化交互体验和视觉效果

这样修改后，无论屏幕大小如何，Logo和信息图标都会保持水平居中，hover弹出的文本框也不会影响原有布局。

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