Html 如何超越身体'；s超出视图端口的高度&；内容是否垂直居中？

我想创建一个内容垂直居中的页面（我正在使用）。我需要使用两种不同的页面背景。一个被分配给html标记，另一个被分配给body标记（我是否创建div无关紧要）。第一个是背景图片（查看端口的全宽和全高，固定，无重复），另一个只是一个图案，用于覆盖图片（重复）。我尝试在这个案例中使用CSS3的多个背景，但并没有达到我的预期效果

问题是，当内容超出视图端口时，主体的背景仅覆盖视图端口的高度。解决方案非常简单：

body { min-height: 100%; }

但它有一个严重的缺点。如果在内容不超过视图端口的情况下设置“最小高度”值，它将不会垂直居中

我创建了一个帮助您更好地理解我的问题的。不要介意JavaScript，因为它在这种情况下不起任何作用。我以1x1像素的背景图像为例

尝试在主体高度设置为100%时切换内容高度并向下滚动。你会明白我在说什么。您可以通过切换主体高度来修复此问题，但一旦将内容高度切换回“自动”，它将不再垂直居中

---

<> P>我希望正文的背景覆盖整个页面的高度，不管内容是否在视图端口中，内容都位于中间。我已经尝试了几个小时，但我失败了，所以也许你们中的一些人知道一些我不知道的事情，可以帮助我。如果你不需要

基本上，您不需要使用

.block

，而是使用top、left和transform进行垂直对齐。您需要

位置：固定，如
位置：绝对将使视口滚动

请不要忘了在
转换前面加上-webkit-、-moz-、-ms-和-o-
以下是我的想法：

我通过固定定位使.block div与屏幕大小相同，从而避免了您的问题。在此之后，我使用.block div滚动其中的元素。希望这能解决您的问题；）

嗯，我把你的解决方案应用到我的页面上，它就像我希望的那样工作。非常感谢。RMo的解决方案最适合我，尽管我感谢您的努力。非常感谢。
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    overflow-y: auto;