title: How can I center image in Bootstrap 4, with fixed-top navbar, and without vertical scrolling?
body: <p>I'd like to achieve the following result:
  <a href="https://i.stack.imgur.com/i6X0j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i6X0j.jpg" alt="ideal layout"></a></p>
  
  <p>Requirements:</p>
  
  <ol>
  <li>Image should be responsive</li>
  <li>Fixed-top navbar has to stay</li>
  <li>No vertical scrolling</li>
  <li>Footer has to stay, too (preferably on the bottom)</li>
  </ol>
  
  <p>I spent the whole day trying to figure out it without results.
  I tried this approach: </p>
  
  <pre><code>https://codepen.io/Codewife_101/pen/rpvdPq
  </code></pre>
  
  <p>but 'align-self-center' caused the vertical scrolling in my website.
  It doesn't look good, in particular on mobile devices.</p>
  
  <p>I VERSION:</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        &lt;title&gt;Red Logo Website&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/font-awesome.min.css"&gt;
        &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
        &lt;link rel="stylesheet" href="css/custom.css"&gt;
        &lt;!--Material Design Icons--&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet"&gt;
        &lt;!--adding Roboto different styles--&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top"&gt;
          &lt;div class="container"&gt;
            &lt;img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"&gt;
            &lt;button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;div class="collapse navbar-collapse" id="navbarNav2"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link font-weight-bold" href=""&gt;Brand Name&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="navbar-nav ml-auto"&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#about"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#about"&gt;Contact&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  
        &lt;!-- 1. JUMBOTRON --&gt;
        &lt;section id="showcase"&gt;
          &lt;div class="container h-100"&gt;
            &lt;div class="row h-100 justify-content-center align-self-center"&gt;
              &lt;img src="img/red_logo.svg" class="img-fluid" alt="Red logo"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
  
  
        &lt;!--FOOTER--&gt;
        &lt;footer id="main-footer" class="text-center"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col"&gt;
              &lt;p class="text-muted"&gt;Copyright &amp;copy; 2017 &lt;img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"&gt; RedDesign LLC&lt;/p&gt;      
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
  
  
        &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I also tried this approach: </p>
  
  <pre><code>https://codepen.io/Codewife_101/pen/eyVxre
  </code></pre>
  
  <p>II VERSION:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"&gt;
        &lt;button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNav2"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link font-weight-bold" href=""&gt;Brand Name&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#about"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#about"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;!-- 1. JUMBOTRON --&gt;
    &lt;section id="showcase"&gt;
      &lt;div class="container h-100"&gt;
        &lt;div class="row h-100 justify-content-center align-items-center"&gt;
          &lt;img src="https://s3-us-west-1.amazonaws.com/all-images-public/red_logo.svg" class="img-fluid" alt="Red logo"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  
    &lt;!--FOOTER--&gt;
    &lt;footer id="main-footer" class="text-center"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
          &lt;p class="text-muted"&gt;Copyright &amp;copy; 2018 &lt;img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"&gt; RedDesign LLC&lt;/p&gt;      
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  </code></pre>
  
  <p>It doesn't center vertically. I'm open to any suggestions/solutions.
  Anyone? I would be very grateful for any tips.</p>
  
  <p>At first glance, my question looks like a duplicate, but when you look deeper, you'll see my situation varies. Besides, my reputation is too low to write comments on somebody else's question.</p>