如何为 Safari 屏幕截图正确居中网站答案

【问题标题】：How to properly center website for Safari screenshot如何为 Safari 屏幕截图正确居中网站
【发布时间】：2021-01-10 18:31:24
【问题描述】：

我有一个简单的单页网站，旨在跨页输入。

这是页面的基本结构：

<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>

我希望内容水平居中，并从页面顶部开始并留有一些边距。当我导航到该网站时，就是这种情况。但是 Safari 的屏幕截图实用程序会产生这样的结果：

我没有使用行业标准的方法来使我的内容居中吗？我该如何解决这个问题？

【问题讨论】：

标签： html css safari

【解决方案1】：

用这个替换正文样式：

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%，那么只需更改顶部值而不是变换值。

Codepen：https://codepen.io/manaskhandelwal1/pen/ZEpMExW

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

margin 0 auto;

像这样：

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

在这里给出上边距只需更改边距的0。但不要更改auto。

Codepen：https://codepen.io/manaskhandelwal1/pen/rNMZNKW

【讨论】：