WordPress Jetpack相关文章插件：图片标题垂直水平居中CSS问题

我帮你搞定这个通用性问题！之前的调试方案容易失效，核心原因是没用到CSS里内容无关的居中布局技巧，咱们用Flexbox或Grid就能轻松实现不管标题长短、图片尺寸变化都稳的居中效果。

首先先明确Jetpack相关文章插件的典型HTML结构（如果你的结构略有不同，只需要调整选择器就行，逻辑完全通用）：

<div class="related-post">
  <img src="文章图片地址" alt="图片描述">
  <h3 class="related-post-title">文章标题</h3>
</div>

方案一：Flexbox布局（最常用的通用居中方案） #

/* 给相关文章容器设置相对定位，作为标题绝对定位的参考容器 */
.related-post {
  position: relative;
  display: inline-block;
  width: 100%; /* 多列布局可改成33.33%等比例，根据你的页面布局调整 */
}

/* 让图片自适应容器，保持比例且无底部间隙 */
.related-post img {
  width: 100%;
  height: auto;
  display: block;
}

/* 标题绝对定位+Flexbox实现完美居中 */
.related-post-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Flexbox核心居中属性，内容不管长短都能居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选：加半透明背景提升标题可读性 */
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  margin: 0;
  padding: 1rem;
  text-align: center; /* 多行标题也能保持居中对齐 */
}

方案二：Grid布局（更简洁的万能居中写法） #

如果你习惯用Grid，也可以用一行代码搞定居中：

.related-post {
  position: relative;
  display: inline-block;
  width: 100%;
}

.related-post img {
  width: 100%;
  height: auto;
  display: block;
}

.related-post-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Grid的万能居中属性，直接让内容水平垂直居中 */
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

为什么这个方案通用？ #

• 容器用position: relative锚定标题的定位，不管容器尺寸怎么变，标题都能相对它布局
• Flexbox/Grid的居中属性是内容无关的，不管标题是一行还是多行，甚至图片尺寸调整，都能保持完美居中
• 图片设置width: 100%; height: auto保证自适应容器，不会因为图片原始尺寸导致布局混乱

如果你的Jetpack插件生成的类名不同（比如容器是.jetpack-related-posts-item，标题是.jetpack-related-posts-item-title），只需要替换对应的选择器即可，核心逻辑完全一致。

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