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

时间:2017-05-02 23:01:00

标签: css bootstrap-4 twitter-bootstrap-4

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

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

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

http://www.bootply.com/tDsB8L0er7

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

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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

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

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

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

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

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