修复WordPress站点http://bigidearesults.com/在Chrome的logo垂直对齐问题

这种情况我碰到过不少，不同浏览器对垂直居中的渲染细节确实会有差异，尤其是嵌套多层div的时候。下面给你几个靠谱的CSS方案，应该能解决Chrome里的问题：

方案一：Flexbox布局（推荐，现代浏览器兼容性最好） #

Flexbox是目前最稳定的垂直居中实现方式，Chrome和Firefox都能完美支持。给包含logo的直接父div添加以下样式：

/* 替换成你实际的父div类名或ID */
.logo-container {
  display: flex;
  align-items: center; /* 核心：实现垂直居中 */
  justify-content: center; /* 如果需要同时水平居中，加上这行 */
  height: 100%; /* 关键：确保父元素有明确高度，可根据实际场景改成固定值比如80px */
}

如果嵌套了多层div，记得要让上层的父元素也有正确的高度设置（比如height:100%或者固定高度），否则flex布局的垂直居中会失效。

方案二：绝对定位+Transform #

如果因为某些原因不能用Flexbox，这个方法也很可靠，不需要改变父元素的布局模式：

/* 父div样式 */
.logo-container {
  position: relative;
  height: 100%; /* 同样需要父元素有明确高度 */
}

/* logo图片样式 */
.logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

原理是通过绝对定位把元素左上角移到父元素中心，再用transform把元素往回挪自身的一半大小，完美居中，不会受元素尺寸影响。

方案三：Line-height + Inline-block（针对旧布局兼容） #

如果你的页面用了老式的inline-block布局，Chrome可能会因为基线对齐的问题导致logo顶部对齐，试试这个：

.logo-container {
  line-height: 80px; /* 这里的值要等于父元素的高度 */
  font-size: 0; /* 消除inline-block元素之间的默认间隙 */
}

.logo-img {
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* 重置logo的行高，避免影响其他内容 */
}

额外注意事项 #

• 给所有元素加上box-sizing: border-box;，避免padding或border影响元素高度计算：

* {
  box-sizing: border-box;
}

• 检查logo图片本身有没有被设置了margin-top或者其他偏移样式，用浏览器开发者工具（F12）查看元素的样式，排除冲突。
• 如果嵌套多层div，要确保每一层父元素的高度都正确传递，不要出现某一层高度为0的情况。

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