fullscreen height with vertically centered content - css

Question

I have a page that should never scroll and always be the full width and height of the screen.
All content that is in this page should be vertically centered. There should be no scrolling.
Here is a bootply of the code. I can add the actual code here as well if required but seems easier just to supply it this way.
http://www.bootply.com/tDsB8L0er7
If you resize the preview window, you will see that you are still able to scroll some even though the height should be 100% and no content exceeds the height.

Answer 1

I would make .wrapper have a 100vh height, use overflow: hidden to keep any scrollbars from showing up should your content bleed outside of the viewport, then apply display: flex; justify-content: center; align-items: center so that it's child, .container will be centered in the middle
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

one thing to recommend. be careful with the 100vh value. if you take a look as example on the iOS mobile browser safari, you can see if you scroll down, the viewheigt is changing dynamically. this could mess up with the 100vh value because your site will stretch and shrink with the mobile browsers viewport on scroll.
here is an example how i would do this:
https://codepen.io/joelstuedle/pen/gmomGe
what I'm doing there is the following:
at least two elements are needed to make vertical centering possible. I took the html and the body element.
the css needed for those elements looks like this:
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}