CSS问题：图片无法在Div容器中垂直居中

我来帮你搞定这个垂直居中的难题！你之前尝试的line-height和vertical-align: middle没生效，大概率是因为WordPress的aligncenter类悄悄把图片变成了块级元素——而vertical-align只对行内/inline-block元素起作用，这就导致你的设置失效了。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：用Flexbox（最现代简洁的方法） #

Flexbox是现在处理居中问题的首选，代码少且兼容性极佳（支持所有现代浏览器）。只需要修改.trio的CSS：

.trio {
  height: 80px;
  background: #f2f2f2;
  display: flex;
  justify-content: center; /* 实现水平居中，替代aligncenter类的作用 */
  align-items: center; /* 核心：垂直居中 */
}

之后你可以保留或移除图片的aligncenter类，Flex的水平居中逻辑和它不冲突，效果更稳定。

方案2：修复你原来的line-height方案 #

如果不想用Flex，我们可以调整样式让vertical-align生效：

.trio {
  height: 80px;
  line-height: 80px;
  background: #f2f2f2;
  text-align: center; /* 水平居中 */
}
.wp-image-6733 {
  vertical-align: middle;
  display: inline-block; /* 强制图片为inline-block，抵消aligncenter的块级样式 */
  margin: 0; /* 去掉aligncenter自带的左右margin（如果不需要的话） */
}

原理是让图片回到行内元素状态，这样vertical-align: middle就能和父元素的line-height配合，实现垂直居中。

方案3：绝对定位方案（兼容老浏览器） #

如果需要兼容IE9及更早版本，可以用绝对定位的方法：

.trio {
  height: 80px;
  background: #f2f2f2;
  position: relative; /* 父元素设为相对定位 */
}
.wp-image-6733 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过位移实现完美居中 */
}

这个方法不需要考虑元素的显示类型，直接通过定位计算实现居中。

你可以根据自己的需求选择其中一种方案，Flexbox是最推荐的哦！

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