响应式CSS文本侧边装饰定位问题求助

核心修改思路 #

• 垂直居中：用 top: 50% + transform: translateY(-50%) 实现基于元素自身高度的垂直居中，避免百分比top值随父容器高度变化偏移。
• 水平精准定位：通过 calc() 计算左右位置，刚好贴合 .text-frame 侧边，同时适配父容器内边距和文本框宽度。
• 可选简化结构：用伪元素替代额外的装饰div，减少HTML冗余。

完整实现代码 #

HTML（简化版，使用伪元素）

<div class="green-frame">
  <div class="text-frame">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

CSS

.green-frame {
  position: relative;
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
  background-color: #228B22;
  box-sizing: border-box; /* 确保内边距不会撑开容器宽度 */
}

.text-frame {
  background-color: #FFF;
  width: 90%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* 左侧装饰伪元素 */
.green-frame::before {
  content: '';
  position: absolute;
  top: 50%;
  /* 精准计算位置：内边距 + 单侧空隙 - 装饰图半宽 */
  left: calc(1rem + (100% - 90% - 2rem)/2 - 64px/2);
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background-image: url('https://cdn-icons-png.flaticon.com/128/4380/4380600.png');
  background-size: cover;
  z-index: 1;
}

/* 右侧装饰伪元素（水平翻转） */
.green-frame::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(1rem + (100% - 90% - 2rem)/2 - 64px/2);
  transform: translateY(-50%) scaleX(-1);
  width: 64px;
  height: 64px;
  background-image: url('https://cdn-icons-png.flaticon.com/128/4380/4380600.png');
  background-size: cover;
  z-index: 1;
}

关键细节说明 #

1. box-sizing: border-box：让容器的内边距包含在宽度计算内，确保百分比布局的准确性。
2. calc() 定位逻辑：
   • 1rem 是父容器的内边距，先留出该空间；
   • (100% - 90% - 2rem) 是文本框两侧的剩余可用空间（减去左右内边距），除以2得到单侧空隙；
   • 减去 64px/2（装饰图宽度的一半），让装饰图中线对齐文本框侧边，实现紧贴效果。
3. transform: translateY(-50%)：将元素向上移动自身高度的50%，配合 top:50% 实现完美垂直居中，不受父容器或自身高度变化影响。

保留原HTML结构的修改方案 #

如果坚持使用独立的装饰div，只需修改装饰元素的CSS：

.left-deco {
  position: absolute;
  top: 50%;
  left: calc(1rem + (100% - 90% - 2rem)/2 - 64px/2);
  transform: translateY(-50%);
  z-index: 1;
}

.right-deco {
  position: absolute;
  top: 50%;
  right: calc(1rem + (100% - 90% - 2rem)/2 - 64px/2);
  transform: translateY(-50%) scaleX(-1);
  z-index: 1;
}

.left-deco img, .right-deco img {
  width: 64px;
  height: 64px;
}

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