本文旨在提供一种在响应式 mockup 图片上精确定位文字的方法，确保文字始终居中于指定区域并随图片缩放。我们将探讨使用 CSS 绝对定位和 transform 属性来实现这一目标，并提供详细的代码示例和注意事项，帮助开发者在不同屏幕尺寸下保持文字的正确显示。
要在响应式 mockup 图片上精确定位文字，并使其始终居中于特定区域，同时随着图片大小的改变而相应缩放，一种有效的方法是结合使用 CSS 的绝对定位和 transform 属性。
基本思路：
- 容器定位： 将图片和文字都放在一个相对定位的容器中。
- 绝对定位文字： 使用绝对定位将文字放置在容器内。
- 居中处理： 使用 transform: translate(-50%, -50%) 将文字的中心点对准目标位置。
- 响应式缩放： 图片的响应式特性会带动文字一起缩放。
具体实现步骤：
1. HTML 结构：
<div class="relative w-full flex justify-center">
<img src="https://i.imgur.com/sb5Jz5I.png" class="object-contain max-h-full w-full" alt="Mockup Image">
<p class="absolute text-black font-bold text-2xl" id="dynamic-text">Dynamic Text</p>
</div>- relative 类应用于容器 div，使其成为定位的参照物。
- w-full flex justify-center 类用于使容器宽度占满父元素，并且居中显示图片和文字。
- img 标签包含 mockup 图片，object-contain 和 max-h-full w-full 类确保图片在容器内完整显示，并保持宽高比。
- p 标签包含需要定位的文字，absolute 类使其脱离文档流，可以进行绝对定位。text-black font-bold text-2xl 类用于设置文字颜色、粗细和大小。
2. CSS 样式：
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 32%; /* 根据 mockup 图片调整 */
left: 50%;
transform: translate(-50%, -50%);
width: 80%; /* 根据 mockup 图片调整 */
text-align: center;
}
#dynamic-text {
z-index: 10; /* 确保文字在图片上方 */
}- .relative 类设置容器为相对定位。
- .absolute 类设置文字为绝对定位，并使用 top 和 left 属性将其定位到目标区域的中心。transform: translate(-50%, -50%) 确保文字的中心点与 top 和 left 指定的位置重合，实现真正的居中。
- width 属性用于控制文字的宽度，根据 mockup 图片的搜索框大小进行调整。text-align: center 用于使文字在指定宽度内居中。
- #dynamic-text 选择器设置文字的 z-index 属性，确保其显示在图片上方。
3. 注意事项：
- top 和 left 值的调整： top 和 left 的值需要根据具体的 mockup 图片进行调整，以确保文字位于目标区域的中心。可以使用浏览器的开发者工具进行调试。
- width 值的调整： width 的值需要根据 mockup 图片的搜索框大小进行调整，以确保文字在搜索框内居中显示。
- 字体大小： 字体大小可以根据需要进行调整，但要注意保持与 mockup 图片的比例协调。
- 响应式测试： 在不同的屏幕尺寸下进行测试，确保文字的定位和缩放效果符合预期。
完整示例（使用 Tailwind CSS）：
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center">
<div class="relative w-full flex justify-center">
<img src="https://i.imgur.com/sb5Jz5I.png" class="object-contain max-h-full w-full" alt="Mockup Image">
<p class="absolute text-black font-bold text-2xl z-10 text-center" style="top: 32%; left: 50%; transform: translate(-50%, -50%); width: 80%;">Dynamic Text</p>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</div>
</div>总结：
通过结合使用 CSS 的绝对定位和 transform 属性，我们可以实现响应式 mockup 图片上的文字精确定位和居中显示，确保文字始终位于目标区域并随图片缩放。这种方法简单有效，适用于各种 mockup 图片和屏幕尺寸。关键在于根据具体的 mockup 图片调整 top、left 和 width 的值，并在不同的屏幕尺寸下进行测试，以确保效果符合预期。
