Question

我有一个永不滚动的页面，并且始终是屏幕的整个宽度和高度。

此页面中的所有内容都应垂直居中。应该没有滚动。

这是代码的bootply。如果需要，我可以在这里添加实际代码，但只是以这种方式提供它似乎更容易。

http://www.bootply.com/tDsB8L0er7

如果您调整预览窗口的大小，您将看到即使高度应为100％且内容超出高度，您仍然可以滚动一些。

Answer 1

我会让.wrapper的{{1}}高度，如果您的内容在视口之外出血，请使用100vh来阻止任何滚动条显示，然后应用overflow: hidden它是孩子，display: flex; justify-content: center; align-items: center将集中在中间

.container

body {
  margin: 0;
}

section {
        margin-top: 30px;
        text-align: center;
    }

    .message {
        font-weight: 900;
        font-size: 52px;
        font-family: 'Lora', serif;
    }

    .dim-10 {
        opacity: 0.1;
        filter: alpha(opacity=10);
    }

    .input-group-lg > .form-control, .input-group-lg > .input-group-btn > .btn {
        font-size: 40px;
    }

    .awards img {
        padding-left: 5px;
        padding-right: 5px;
    }

.wrapper {
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

要推荐的一件事。小心100vh值。如果您在iOS移动浏览器Safari中查看示例，您可以看到如果向下滚动，viewheigt会动态更改。这可能会弄乱100vh值，因为您的站点将在滚动时使用移动浏览器视口进行拉伸和缩小。

这是一个如何做到这一点的例子： https://codepen.io/joelstuedle/pen/gmomGe

我正在做的是以下内容：至少需要两个元素才能使垂直居中成为可能。我使用了html和body元素。

这些元素所需的css如下所示：

html {
    display: table;
    width: 100%;
    height: 100%;
}

body {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

全屏高度，垂直居中的内容

2 个答案: