垂直居中内容的全屏高度

Question

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

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

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

http://www.bootply.com/tDsB8L0er7

如果调整预览大小 window，您会发现即使高度应为 100% 并且没有内容超过高度，您仍然可以滚动一些内容。

Answer 1

我会让 .wrapper 有一个 100vh 高度，使用 overflow: hidden 防止任何滚动条出现，如果你的内容溢出视口，然后应用 display: flex; justify-content: center; align-items: center 这样 child, .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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<section class="logo">
    <img class="img-fluid" src="" alt="Missing Image">
</section>

<section class="message">
    Some message here
</section>

<section class="user-input">
    <div class="row justify-content-sm-center">
        <div class="col-10">
            <div class="card card-inverse">
                <div class="card-block">
                    <div class="input-group input-group-lg">
                        <input id="name" type="text" class="form-control" placeholder="Some place holder" aria-describedby="">
                        <span class="input-group-btn">
                            <button class="btn btn-secondary btn-success" type="button">Button</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="awards">
    <img class="img-fluid" src="" alt="Missing Image">
    <img class="img-fluid" src="" alt="Missing Image">
</section>
</div>
</div>

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%;
}

垂直居中内容的全屏高度

fullscreen height with vertically centered content

css

bootstrap-4

twitter-bootstrap-4