top:50% CSS在Chrome生效但Safari不工作 如何居中Angular项目内h1文本

差异原因 #

Safari 对position: relative元素的百分比top属性计算规则与 Chrome 不同，若父容器未明确设置高度属性，Safari 无法正确解析top: 50%的相对值，进而导致垂直居中失效。

解决方案 #

方案1：兼容原有写法

1. 首先确保包裹h1的父元素明确设置了高度属性（如固定高度、height: 100%或height: 100vh等）
2. 给transform属性添加Safari兼容前缀，调整后的h1样式如下：

h1{
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

方案2（更推荐）：使用Flex布局实现居中

Flex布局的跨浏览器兼容性更稳定，不会出现定位属性的解析差异，只需修改父容器样式即可：

1. 给包裹h1的父容器添加以下样式：

/* 替换为你实际的父容器类名 */
.h1-parent {
  /* 添加webkit前缀适配旧版Safari */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 水平居中 */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 垂直居中 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 保留你原有的父容器高度设置即可 */
}

2. 简化h1的样式，移除定位相关属性：

h1{
  font-weight: bold;
  text-align: center;
  margin: 0;
}

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