Html 我需要文本移动与网站的大小（我需要它是对网站的响应）

我有一个页面标题，我可以用填充物移动它，但是如果我调整页面大小，文本将保持在完全相同的位置。我希望它随着页面大小的调整而移动

我试着把它从

的两个div中取出来。我尝试了
填充：auto
，并使用
边距来移动它

html:

<div class="bg">
            <div class="title">
                <h1 id="pageTitle">Gypsy Moth Web Works</h1>
            </div>
        </div>

.bg {
      background-image: url("moth.jpg");

        height: 89%;

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    #pageTitle {
        color: hsla(48, 41%, 63%, 1);
        text-align: center;
        font-family: 'Electrolize', sans-serif;
        font-size: 80px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

        margin: 0;
    /*284*/
        padding-top: 284px;
    }

这里的问题是，您试图通过添加padd-top:284px使h1垂直居中，这不是一种对居中的响应方式，因为文本始终位于距顶部284px的位置

更好的居中方法是更改div的属性，其中h1是子元素。
在父div中
加：

display:flex//将div转换为响应元素

对齐内容：中心；//在中心x轴上对齐子图元

对齐项目：居中；//在中心y轴上对齐子图元

高度：（实验）//在相对/响应或像素测量之间进行选择，以获得所需的效果

删除：
顶衬

例如：


.bg{
背景图片：url（“moth.jpg”）；
身高：100%；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
}
#页面标题{
颜色：hsla（48,41,63,1）；
文本对齐：居中；
字体系列：“Electralize”，无衬线；
字号：80px；
文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0-1px黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
垫底：20px；
高度：50vh；
/*284*/
}

吉普赛蛾网

“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”

如何移动？你想让它停留在页面的中间吗？你是在说响应吗？是的，这是一个很好的方法，如果你想把文本集中在页面上，因为窗口已经调整大小，你所提供的CSS已经做到了。您能更清楚地解释一下“随页面大小移动”是什么意思吗？另外，通常最好避免使用像
#pageTitle
这样的ID来设置样式，因为这样会降低CSS的可重用性。尝试向
h1
添加一个类，并在该类上应用样式。我不想更改字体大小。简单地说，想象一下页面中间的文字。当您将浏览器的y轴尺寸调整为更小时，除文本的一部分外，其他所有内容都会移动。然后它会干扰它下面的文本。这可能是您如何将h1居中而不是使用填充：284px将div的高度设置为百分比，然后添加显示：flex；证明内容：中心；对齐项目：居中；如果您仍然希望它居中，则它将响应居中。但你具体想把它移到哪里？左边？或者更靠近上面的额外内容？没问题，我只是把原来的答案改成更好的套件