如何用HTML/CSS实现顶部居中且图片跨左边界的卡片？

要实现你要的效果，只需要加一层外层容器负责居中，再结合position: relative/absolute就能搞定，不需要复杂结构。下面是具体实现：

修改后的HTML结构 #

<div class="card-wrapper">
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/United-kingdom_flag_icon_round.svg">
    Card Content
  </div>
</div>

核心CSS代码 #

/* 外层容器：负责卡片水平居中，限制卡片最大宽度 */
.card-wrapper {
  width: 100%;
  max-width: 600px; /* 可根据需求调整 */
  margin: 20px auto 0; /* 顶部间距+水平居中 */
}

/* 卡片主体：作为图片的定位参考 */
#container {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px 20px 20px 70px; /* 左侧padding给图片留出空间 */
}

/* 越界图片：基于卡片定位 */
#container img {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -50px; /* 向左偏移一半宽度，实现半跨边界 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐卡片 */
}

关键知识点解释 #

1. 外层容器的作用：用margin: 0 auto实现卡片水平居中，同时通过max-width控制卡片在大屏幕下的宽度，避免过宽影响观感。
2. position: relative的意义：给内部的图片提供定位基准，确保图片的absolute定位是相对于卡片，而不是整个页面。
3. 图片的偏移逻辑：left: -50px让图片一半露出卡片左侧，top:50% + transform: translateY(-50%)保证图片垂直居中于卡片，不会出现上下偏移。
4. 卡片的左侧padding：必须设置足够的左侧内边距，避免卡片内的文字被图片覆盖，数值可以根据图片大小调整（比如图片宽100px，左移50px，padding-left设为70px，留出20px的间距）。

你可以直接把这段代码替换到你的示例里，就能得到和预期一致的效果。

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