如何通过CSS定位实现笔记本图片上文本的居中显示？

当然有啦！用CSS定位的方式就能轻松实现文本在图片内部居中的效果，操作起来非常直观，下面给你具体的实现方案：

核心思路 #

我们可以利用**相对定位（relative）和绝对定位（absolute）**的组合：把包裹图片和文本的.laptop容器设置为相对定位，作为文本定位的参考；再把文本.laptop-para设置为绝对定位，通过偏移和变换让它精准居中。

修改后的代码示例 #

CSS 样式（可放在<style>标签或外部样式文件中）

.laptop {
  /* 设置相对定位，为内部绝对定位元素提供参考容器 */
  position: relative;
  /* 让容器尺寸适配图片大小，避免多余空白区域 */
  display: inline-block;
  /* 可选：如果需要统一容器宽度，可设置和图片一致的16em */
  /* width: 16em; */
}

.laptop-para {
  /* 设置绝对定位，脱离文档流 */
  position: absolute;
  /* 让文本在容器内垂直水平双居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选样式：提升文本可读性，比如白色文字+半透明背景 */
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.5em 1em;
  margin: 0;
  border-radius: 4px;
  text-align: center; /* 确保多行文本也能居中 */
}

.laptop img {
  width: 16em;
  display: block; /* 消除图片底部默认的空白间隙 */
}

修改后的HTML结构

<div class="row">
  <div class="col-md-4">
    <div class="laptop">
      <img src="images/laptop.png" alt="笔记本图片">
      <p class="laptop-para">Météo Ravageurs Pytosanitaire</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="laptop">
      <img src="images/laptop.png" alt="笔记本图片">
      <p class="laptop-para">Collecte et transmission de données</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="laptop">
      <img src="images/laptop.png" alt="笔记本图片">
      <p class="laptop-para">Systèmes Electriques de commande</p>
    </div>
  </div>
</div>

效果说明 #

• position: relative给.laptop容器创建了专属定位上下文，确保内部绝对定位的文本只会相对于这个容器偏移，不会乱跑。
• top: 50%; left: 50%先把文本的左上角移到容器中心，再通过transform: translate(-50%, -50%)让文本自身向左向上偏移一半的尺寸——不管文本长短，都能完美居中在图片正中央。
• 额外添加的半透明背景和白色文字是为了让文本在图片上更醒目，你可以根据自己的设计需求调整颜色、 padding 等样式~

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