WordPress(SiteOrigin)英雄图Logo垂直居中及图片叠加视差效果问题

嘿，我明白你现在的困扰——已经把Logo水平居中了，但垂直方向就是不对齐对吧？别担心，咱们用几种简单的CSS方法就能搞定，完全适配你用SiteOrigin自定义HTML部件的场景。

方法1：Flexbox（最推荐，简洁现代） #

Flexbox是现在实现元素居中最省心的方式，只需要给你的.parallax容器加几个CSS属性就行：

修改后的完整代码如下：

.logo {
  height: 30%;
  width: auto;
  z-index: 10;
  /* 这里可以去掉margin:auto了，Flex容器会帮我们搞定居中 */
}
.parallax {
  background-image: url("你的背景图URL");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  /* 关键新增的Flex布局属性 */
  display: flex;
  align-items: center; /* 实现垂直居中 */
  justify-content: center; /* 实现水平居中（和你原来的效果一致） */
}

<div class="parallax">
  <img src="你的Logo图URL" class="logo"/>
</div>

简单解释下：

• display: flex把.parallax转换为Flex容器，它的子元素（也就是你的Logo）会自动遵循Flex布局规则
• align-items: center让子元素在垂直方向上居中对齐
• justify-content: center让子元素在水平方向上居中对齐，这样你原来写的margin: auto就可以不用啦

方法2：绝对定位+Transform（兼容老浏览器） #

如果你需要兼容一些比较老旧的浏览器，这个方法也很靠谱：

修改后的代码：

.logo {
  height: 30%;
  width: auto;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 用transform把元素自身的中心移到容器中心 */
  transform: translate(-50%, -50%);
}
.parallax {
  background-image: url("你的背景图URL");
  height: 100vh;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  /* 必须设置相对定位，让绝对定位的子元素以它为参照 */
  position: relative;
}

<div class="parallax">
  <img src="你的Logo图URL" class="logo"/>
</div>

这个方法的核心逻辑：

• 给父容器.parallax加position: relative，让子元素的绝对定位基于这个容器（而不是整个页面）
• 给.logo设置top:50%和left:50%，把元素的左上角移到容器中心位置
• 最后用transform: translate(-50%,-50%)把元素往左上挪自身宽高的一半，这样元素的中心就和容器中心完美对齐了

两种方法都能解决你的问题，个人更推荐Flexbox，代码更简洁，而且现在主流浏览器都支持啦～

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