水平和垂直居中不适用于 iOS Safari？

Question

这是我为家人朋友制作的第一个网站。我在这个网站上有一系列图像（斑点选项卡 - 即棒球、足球、垒球等），其中包含我希望垂直和水平居中的 h1 文本。它适用于我的手机和浏览器。但是我哥哥告诉我它最终没有以他的 iphone 6 with safari 为中心。

http://www.pennfamous.com/tp/

我正在使用以下 css 使 h1 居中：

.h1format h1 {
    color: #FFFFFF; 
    position: absolute;
    top: 40%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 2em;
}

然而，我兄弟在他的 iOS 上告诉我它最终看起来像这样：

http://prntscr.com/9pdqk0

有没有简单的解决方法？记住我是新手。谢谢

Answer 1

对于 Safari，您需要 -webkit-prefix。你也可以添加 -ms-prefix 以获得 IE9 的支持（即使它快死了）。

.h1format h1 {
  color: #FFFFFF; 
  position: absolute;
  top: 40%;
  left:50%;
  -ms-transform: translate(-50%,-50%); /* IE 9 */
  -webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
  transform: translate(-50%,-50%);
  font-size: 2em;
}

水平和垂直居中不适用于 iOS Safari？

Horizontal and Vertical Center not working with iOS Safari?

css

center