顶部：50% css 不能在 safari 中工作，但它在 chrome 中工作答案

【问题标题】：Top:50% css not working in safari but it is working in chrome顶部：50% css 不能在 safari 中工作，但它在 chrome 中工作
【发布时间】：2021-09-22 21:43:26
【问题描述】：

我正在尝试将 div 中的文本（h1）以角度居中对齐。文本在 Chrome 中正确对齐，但在 Safari 中无法正常工作。我假设 top:50% 不在 safari 中工作。提前致谢。

当前的 CSS：

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

参考图片供您参考：

铬：

Safari：

【问题讨论】：

试试看stackoverflow.com/questions/291189/…
试过但没用

标签： html css

【解决方案1】：

改用align-self: center

h1{
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  -webkit-align-self: center; //safari 7+
  align-self: center;
}

【讨论】：

谢谢！我试过但没有工作。结果还是一样

【解决方案2】：

试试这个-webkit-align-self: center;

h1{
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  top: 50%;/*remove this*/
  transform: translateY(-50%);/*remove this */
  -webkit-align-self: center; //safari 7+
  align-self: center;
}

【讨论】：

谢谢！我试过但没有工作。结果还是一样
Safari 是最新的吗？

【解决方案3】：

你不需要使用位置属性来做你需要的事情。如果你使用flexbox properties，你可以做同样的事情，但可能没有 safari 奇怪的行为。

我不建议像其他答案建议的那样使用浏览器扩展来使用 CSS hacks

看看我的例子

div {
  height: 100px;
  border: solid 1px #f00;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div>
  <h1>some text</h1>
</div>

PS：边框和高度属性仅用于可视化目的，您不需要使用它们

【讨论】：

感谢您的信息！但它并不完全垂直居中。