Html 是否将新闻稿表单固定到背景图像？

我需要做一个网站，而不打破它的结构。但是，我遇到了一个问题。有人建议我在上面写一份时事通讯，所以我写了。但是，当我试图调整窗口的大小（检查它是否破裂）时，它没有破裂，但它是偏心的，有没有办法使它始终相对于背景居中

正常尺寸居中：

已调整大小但未居中：

我试过了

vertical-aling:baseline；|位置：粘性；|最高：16.5%；底部：16.5%

CSS:

.boletim.caixa_电子邮件{
位置：绝对位置；
z指数：999；
保证金：0自动；
左：0；
右：0；
底部：33%；
文本对齐：居中；
宽度：50%；
字体系列：Bebas Neue Regular；
字体大小：1vw；
}
输入[类型=电子邮件]，输入[类型=提交]{
宽度：45%；
高度：自动；
填充：12px；
利润率：8px0；
显示：内联块；
垂直对齐：基线；
边框：1px实心#ccc；
框大小：边框框；
}

HTML:

这是一个很好的例子！

---

我想在调整窗口大小时使其始终居中（相对于其背景）。

尝试使用

transform

.boletim .caixa_email{
    position:absolute;
    z-index:999;
    margin:0 auto;
    left:50%;
    top:50%;
    text-align:center;
    width:50%;
    font-family:Bebas Neue Regular;
    font-size:1vw;
    transform: translate(-50%, -50%);
}

---

尝试使用

transform

.boletim .caixa_email{
    position:absolute;
    z-index:999;
    margin:0 auto;
    left:50%;
    top:50%;
    text-align:center;
    width:50%;
    font-family:Bebas Neue Regular;
    font-size:1vw;
    transform: translate(-50%, -50%);
}

---

这个结果可以通过简单的弯曲来实现，不需要绝对位置。 为css中的背景类提供背景，或者你可以将图像放在其中，并使img绝对高度：100%；宽度：100%；左：0；排名：0

input[type=email]，input[type=submit]{
宽度：45%；
高度：自动；
填充：12px；
利润率：8px0；
显示：内联块；
垂直对齐：基线；
边框：1px实心#ccc；
框大小：边框框；
}
.背景{
背景：#999；
高度：100vh；
}
形式{
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

这是一个很好的例子！

这一结果可以通过简单的柔性实现，无需绝对位置。 为css中的背景类提供背景，或者你可以将图像放在其中，并使img绝对高度：100%；宽度：100%；左：0；排名：0

input[type=email]，input[type=submit]{
宽度：45%；
高度：自动；
填充：12px；
利润率：8px0；
显示：内联块；
垂直对齐：基线；
边框：1px实心#ccc；
框大小：边框框；
}
.背景{
背景：#999；
高度：100vh；
}
形式{
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

这是一个很好的例子！

您的最佳选择是使用flexbox。你能添加HTML代码吗？这里展示了如何使用flexbox垂直居中，但是如果没有HTML，很难将其应用到代码中。当然，我会用HTML编辑文章。你最好的选择是使用flexbox。你能添加HTML代码吗？这里展示了如何使用flexbox垂直居中，但如果没有HTML，很难将其应用到代码中。当然，我将使用HTMLNice编辑文章，但这也可以通过Flex实现，不需要绝对位置。很好，但也可以通过Flex实现，不需要绝对位置。谢谢回答！但不幸的是，这并没有达到预期效果，但再次感谢您的支持！谢谢你的回答！但不幸的是，这并没有达到预期效果，但再次感谢您的支持！