css - 垂直居中内容的全屏高度

Question

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

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

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

http://www.bootply.com/tDsB8L0er7

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

Answer 1

我会让 .wrapper 有一个 100vh 高度，使用 overflow: hidden 来防止任何滚动条在你的内容溢出时出现视口(viewport)，然后应用 display: flex;证明内容:居中； 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>