如何修正CSS使绝对定位图标在全分辨率下居中对齐？

两列中的绝对定位图标需在所有分辨率下保持居中对齐，尝试通过移动端媒体查询调整图标位置，但各分辨率下均无法精准对齐。

尝试的媒体查询代码：

@media screen and (max-width: 767px) {
  .contact-mode-icon {
    top: -4rem;
  }
  .contact-mode-col {
    margin-bottom: 6rem !important;
  }
}

相关HTML代码：

<div class="row connect-with-concierge-row">
                <div class="col contact-mode-col col-xs-12 col-md-4">
          <div class="contact-mode-icon">
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/emailicon-png.png">
          </div>
          <div class="contact-mode-content">
            <div class="icon-title">SUBMIT QUESTIONS</div>
            <div class="icon-description" style="height: 106px;"><span>Fill out this form </span>&nbsp;with your questions or requests and we'll respond ASAP (maximum one business day)</div>
                        <div class="center-xs connect-with-concierge-cta">
              <a id="btn" class="btn" role="button" target="" title="Complete Form">
                Complete Form              </a>
            </div>
                      </div>
        </div>
                <div class="col contact-mode-col col-xs-12 col-md-4">
          <div class="contact-mode-icon">
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/Call_Icon_png.png" ;="">
          </div>
          <div class="contact-mode-content">
            <div class="icon-title">TALK TO AN EXPERT</div>
            <div class="icon-description" style="height: 106px;"><span>Prefer to schedule a call? </span>&nbsp;Meet live with a member of our Gift Concierge team at a time most convenient for you</div>
                        <div class="center-xs connect-with-concierge-cta">
              <a href="#" class="btn cta-btn-purple" role="button" target="" title="Schedule a Meeting">
                  Schedule a Meeting              </a>
            </div>
          </div>
                  </div>
      </div>

现有CSS代码：

.contact-mode-icon {
  position: absolute;
  top: -3rem;
  left: 9rem;
}
.contact-mode-content {
  border: 2px solid;
  border-color: #A6A2A3;
  padding-top: 3rem;
  padding-bottom: 1rem;
  max-width: 342px;
}
.contact-mode-content .icon-title {
  font-family: 'Roboto';
  font-weight: bold;
  text-transform: capitalize;
  font-size: 1.2rem;
  margin: 1rem auto;
}
.contact-mode-content .icon-description {
  font-family: 'Roboto';
  font-size: 1rem;
  padding: 0 1.1rem;
  margin-bottom: 1rem;
}
.contact-mode-content .icon-description span {
  font-weight: bold;
}
.contact-mode-content .btn {
  padding: 1rem;
}
.connect-with-concierge {
  margin-top: 3rem;
} 

图标错位情况：图标未与下方卡片居中对齐，不同分辨率下偏移位置不一致。

问题根源是使用固定left值定位图标，无法适配不同宽度的容器。改用以下方法实现绝对定位元素的自适应居中：

修改后的完整CSS代码 #

/* 给父容器添加相对定位，作为图标定位基准 */
.contact-mode-col {
  position: relative;
  margin-bottom: 6rem;
}

/* 重写图标定位逻辑，实现水平自适应居中 */
.contact-mode-icon {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
}

.contact-mode-content {
  border: 2px solid #A6A2A3;
  padding-top: 3rem;
  padding-bottom: 1rem;
  max-width: 342px;
  margin: 0 auto; /* 确保卡片本身在父容器中居中 */
}

.contact-mode-content .icon-title {
  font-family: 'Roboto';
  font-weight: bold;
  text-transform: capitalize;
  font-size: 1.2rem;
  margin: 1rem auto;
}

.contact-mode-content .icon-description {
  font-family: 'Roboto';
  font-size: 1rem;
  padding: 0 1.1rem;
  margin-bottom: 1rem;
}

.contact-mode-content .icon-description span {
  font-weight: bold;
}

.contact-mode-content .btn {
  padding: 1rem;
}

.connect-with-concierge {
  margin-top: 3rem;
} 

/* 移动端仅调整垂直位置，保留居中逻辑 */
@media screen and (max-width: 767px) {
  .contact-mode-icon {
    top: -4rem;
  }
}

关键改动说明 #

• 父容器相对定位：让.contact-mode-icon的绝对定位基于父列容器，避免脱离布局流导致定位偏差
• 水平居中实现：left: 50%将图标左边缘移到容器中点，transform: translateX(-50%)再将图标向左偏移自身宽度的50%，完美适配任意容器宽度
• 卡片居中：给.contact-mode-content添加margin: 0 auto，确保卡片在父容器中居中，进一步保证图标与卡片的对齐一致性
• 简化媒体查询：仅调整垂直方向的top值，无需修改水平定位，减少冗余代码

内容的提问来源于Stack Exchange，提问作者Pramod Gangadar