仅在Safari浏览器中Div无法垂直居中的技术问题求助

嘿，我来帮你搞定这个Safari专属的布局兼容坑！

问题根源分析 #

你给的代码里，父元素.splash已经用了display: flex+align-items: center+justify-content: center来实现居中，但子元素.media设置了position: absolute——这会让它完全脱离flex布局的文档流，父元素的flex居中规则自然就对它失效了。而且Safari在处理绝对定位元素与flex容器的组合时，比Chrome/Firefox的规则更严格，这就是为什么只有Safari出问题的原因。

解决方案（两种可选） #

方案1：移除绝对定位，利用Flex布局自然居中

如果你的布局允许去掉.media的绝对定位，这是最简洁且兼容性最好的方法：

/* 修改后的.media样式 */
.media {
  display: block;
  padding-left: 3px;
  /* 删掉 position: absolute; 和 left: 0; */
}

这样.media会作为flex容器的子项，直接继承父元素的居中规则，在所有浏览器（包括Safari）里都能正常垂直居中。

方案2：保留绝对定位，用transform实现居中

如果因为其他布局需求必须保留position: absolute，可以用绝对定位的经典居中技巧，同时利用transform来修正Safari的兼容性：

/* 修改后的.media样式 */
.media {
  display: block;
  position: absolute;
  padding-left: 3px;
  left: 0;
  /* 添加垂直居中代码 */
  top: 50%;
  transform: translateY(-50%);
}

• top: 50%会让元素的顶部对齐父容器垂直方向的中点
• transform: translateY(-50%)会把元素向上移动自身高度的50%，从而实现真正的垂直居中
• 如果你同时需要水平居中（原代码里left是0，按需调整），可以改成：left: 50%; transform: translate(-50%, -50%);

额外注意点 #

别忘了检查父元素.splash的高度是否生效：你设置了height: 100%和min-height: 50%，要确保.splash的直接父容器也有明确的高度（比如height: 100%或者固定高度），否则height: 100%在Safari里可能无法正确计算，导致居中效果异常。

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