Html 如何为Safari截图正确设置网站中心_Html_Css_Safari

Html 如何为Safari截图正确设置网站中心

html css safari

Html 如何为Safari截图正确设置网站中心,html,css,safari,Html,Css,Safari,我有一个简单的单页网站，这意味着要进入整个页面这是页面的基本结构： <html><head> <style> body { position: absolute; top: 25%; -moz-transform: translateY(-25%); -webkit-transform: tr

我有一个简单的单页网站，这意味着要进入整个页面

这是页面的基本结构：

<html><head>
        <style>
            body {
                position: absolute;
                top: 25%;
                -moz-transform: translateY(-25%);
                -webkit-transform: translateY(-25%);
                transform:  translateY(-25%);
                background-color: #4e5a65;
                font-family:san fransisco, helvetica neue thin, helvetica neue, helvetica, arial;
                font-size: 24px;
                color: #E4F1FE;
            }
            a {
                color: #abd4fc;
                font-family:san fransisco, helvetica neue thin, helvetica neue, helvetica, arial;

                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }

            a:active {
                color: white;
            }

            a:visited {
                color: #fdd1e7;
            }
            li {
                margin: 10px 0;
            }
          h5 {
            margin-top: 1px;
            margin-bottom: 0px;
          }
          h1 {
            margin-bottom: 0px;
          }
        </style>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title></title>
    </head>
    <body>
        
        <h1 style="text-align: center;">Title Text</h1>

</body></html>


身体{
位置：绝对位置；
最高：25%；
-莫兹变换：translateY（-25%）；
-webkit转换：translateY（-25%）；
转化：translateY（-25%）；
背景色：#4e5a65；
字体系列：旧金山，helvetica neue thin，helvetica neue，helvetica，arial；
字体大小：24px；
颜色：#E4F1FE；
}
a{
颜色：#abd4fc；
字体系列：旧金山，helvetica neue thin，helvetica neue，helvetica，arial；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
a:主动的{
颜色：白色；
}
a:参观了{
颜色：#fdd1e7；
}
李{
利润率：10px0；
}
h5{
页边顶部：1px；
边缘底部：0px；
}
h1{
边缘底部：0px；
}
标题文本

我希望内容水平居中，并从页面顶部开始留一些空白。当我浏览到网站时，情况就是这样。但是，Safari的屏幕截图实用程序会产生以下结果：

我不是在使用行业标准方法来集中我的内容吗？如何解决此问题？

用以下内容替换车身造型：

body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #4e5a65;
  font-family: san fransisco, helvetica neue thin, helvetica neue, helvetica,
    arial;
  font-size: 24px;
  color: #e4f1fe;
}

如果只需要顶部的25%，则只需更改顶部值，而不是变换值

代码笔：

水平对齐的更好方法是使用：像这样：

body {
  margin 0 auto;
  background-color: #4e5a65;
  font-family: san fransisco, helvetica neue thin, helvetica neue, helvetica,
    arial;
  font-size: 24px;
  color: #e4f1fe;
}

在这里，只需更改页边距的

，即可获得最高页边距。但不要更改

自动

代码笔：

body {
  margin 0 auto;
  background-color: #4e5a65;
  font-family: san fransisco, helvetica neue thin, helvetica neue, helvetica,
    arial;
  font-size: 24px;
  color: #e4f1fe;
}