title: Bootstrap 4 vertical align center and bottom of div
body: <p>I use Bootstrap 4. <code>.top</code> block should be 100% width and full screen height. <code>.top-title</code> should be in the middle of screen. <code>.btn-scroll-down</code> shold be down of the screen. </p>
  
  <p>I want my page looks like <a href="https://i.stack.imgur.com/2nfqQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2nfqQ.png" alt="enter image description here"></a>   </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- top --&gt;
          &lt;div class="top js-top"&gt;
              &lt;div class="container h-100"&gt;
                  &lt;div class="row h-100"&gt;
  
                      &lt;div class="col-lg-12"&gt;
                          &lt;h1 class="top-title"&gt;
                              &lt;span class="top-title-1"&gt;text&lt;/span&gt;
                              &lt;span class="top-title-2"&gt;title&lt;/span&gt;
                              &lt;span class="top-title-3"&gt;text&lt;/span&gt;
                          &lt;/h1&gt;
                          &lt;a href="" class="btn-redirect link-go-to-match"&gt;go&lt;/a&gt;
  
                          &lt;a href="#" class="btn-scroll-down js-btn-scroll-down"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;!-- /top --&gt;
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>.btn-redirect {
      display: block;
      width: 301px;
      height: 57px;
      margin: 0;
      padding: 20px 0;
      cursor: pointer;
      -webkit-transition: background-color .3s linear;
      -moz-transition: background-color .3s linear;
      -ms-transition: background-color .3s linear;
      -o-transition: background-color .3s linear;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
      border-radius: 10px;
      background-color: #ff780c;
      background-clip: padding-box;
  }
  
  .btn-scroll-down {
      position: absolute;
      bottom: 2%;
      left: 50%;
      display: block;
      width: 54px;
      height: 54px;
      margin-left: -27px;
      content: '';
      -webkit-transition: opacity .3s;
      -moz-transition: opacity .3s;
      -ms-transition: opacity .3s;
      -o-transition: opacity .3s;
      opacity: .5;
      border: 3px solid #fff;
      border-radius: 50%;
      background-clip: padding-box;
  }
  
  .top
  {
      overflow: hidden;
      height: 100%;
      height: 100vh;
      min-height: 100%;
      min-height: 100vh;
      background-image: url(../images/bg_main.jpg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover;
      background-color: red;
  }
  .top .top-title
  {
      padding-top: 35vh;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
  }
  .top .top-title .top-title-1
  {
      font-family: 'RobotoRegular';
      font-size: 3vh;
      display: block;
  }
  .top .top-title .top-title-2
  {
      font-family: 'DaysOneRegular';
      font-size: 15vh;
      line-height: 1;
      display: block;
      margin-top: 2vh;
  }
  .top .top-title .top-title-3
  {
      font-family: 'RobotoRegular';
      font-size: 3vh;
      display: block;
      margin-top: 2vh;
  }
  .top .link-go-to-match
  {
      margin: 2vh auto 0 auto;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/LL0xm1jg/4/" rel="nofollow noreferrer">https://jsfiddle.net/LL0xm1jg/4/</a></p>
  
  <p>But on the small screen <code>.btn-redirect</code> is placed on texts</p>
  
  <p><a href="https://i.stack.imgur.com/1N7f6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1N7f6.png" alt="enter image description here"></a></p>
  
  <p>I've tried to use <code>flex</code> properties from Bootstrap 4 but my attempts failed. Is there any way to make it work properly?</p>