title: Bootstrap 4.4 carousel control buttons are in increct position
body: <p>I wrote a simple Carousel page based on the official documentation.<br>
  Reference link: </p>
  
  <blockquote>
    <p><a href="https://getbootstrap.com/docs/4.4/components/carousel/#with-controls" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.4/components/carousel/#with-controls</a>  </p>
  </blockquote>
  
  <p>But the Carousel Control Button is not in the right position.<br>
  <a href="https://i.stack.imgur.com/rssLl.jpg" rel="nofollow noreferrer">img1</a><br>
  <a href="https://i.stack.imgur.com/AoHjG.jpg" rel="nofollow noreferrer">img2</a>  </p>
  
  <p>It seems the Carousel Control Button is in the vertical center of browser but not div element. How should I make it in vertical center of ?</p>
  
  <p>My environment: Debian 10 / Bootstrap 4.4.1(installed by yarn)</p>
  
  <p>here's my code:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;header&gt;
      &lt;nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;"&gt;
          &lt;div class="container d-flex"&gt;
              &lt;a class="navbar-brand" href="#"&gt;
                  &lt;img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;"&gt;
                  ***
              &lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarText"&gt;
                  &lt;ul class="navbar-nav nav-pills ml-auto"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link active" href="#"&gt;***&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;***&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;***&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;***&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;***&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div class="container-fluid px-0"&gt;
      &lt;div id="carouselControls" class="carousel slide" data-ride="carousel"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="carousel-item active"&gt;
                &lt;img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="..."&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                &lt;img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="..."&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Popper JS --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>