title: How to make bootstrap carousel image in the verticle center with viewport
body: <p>I have a page <a href="http://jatinraikwar.com/w/slider.html" rel="nofollow noreferrer">http://jatinraikwar.com/w/slider.html</a></p>
  
  <p>In this want to make an image verticle center.
  Using <strong>bootstrap carousel</strong>. </p>
  
  <p>The problem is, wants to show the image as it is, but in the center.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;style&gt;
  .image-style {
      max-width: 100vw;
      max-height: 100vh;
      margin: auto;
  }
  &lt;/style&gt;
  
  &lt;body style="background-color: black;"&gt;
  
      &lt;div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="carousel-item active"&gt;
                  &lt;img src="images/i0.jpg" class="d-block image-style" alt="..."&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                  &lt;img src="images/i1.jpg" class="d-block image-style" alt="..."&gt;
              &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="images/i5.jpg" class="d-block image-style" alt="..."&gt;
      &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                  &lt;img src="images/i3.jpg" class="d-block image-style" alt="..."&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                  &lt;img src="images/i0.jpg" class="d-blockimage-style" alt="..."&gt;
              &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="images/i5.jpg" class="d-block" style="max-width: 100vw; max-height: 100vh; margin: auto;" alt="..."&gt;
      &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>