Centering images (both vertically and horizontally) in Bootstrap 4 carousel

Question

I am using Bootstrap 4 carousel and I am trying to center an image both vertically and horizontally. The following is my code together with the styling:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://placehold.it/200x200/c0392b/000">                      
        </div>
    </div>

    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>



#myCarousel {
    height: 100%;
    width: 100%;    
}

.carousel-indicators {
    margin-bottom: 8px;
}

.carousel-indicators>li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.carousel-inner {
    height: 100%;
    background-color: #213B74;
}

.carousel-item {
    text-align: center;
}

.carousel-item img {
    display: block;
    margin: auto;
}

For now, I have only added one carousel item for testing. The image is being centered horizontally. However, I have tried to set the display attribute for the image to block and its margin to auto but it's still not being centered vertically. Can someone tell me what am I doing wrong, please?

I have tried looking into other questions related to this, but I still didn't find the answer that I'm looking for. In case this question is a duplicate, I would gladly appreciate if you could tell me which answer should I be looking into.

Thanks

You may refer the following web page: https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — The KNVB, Dec 14 '18 at 09:38

Nikhil Kinkar · Accepted Answer · 2018-12-14T10:02:11.280

Here we go, you will need to add a <div> within the .carousel-item, and within that div your image will be placed. We are taking this mediator div to apply the flex centering effect.

If you try to apply flex classes such as d-flex on .carousel-item the carousel will not work as expected.

here I have added the <div class="parent d-flex justify-content-center"> which places the image within it to exact center of the div. Also you will have to give the div min-height equivalent to the .carousel-item OR some standard height for you carousel, so that it don't collapse if the inner image is smaller in size.

you can get to know more about flex here, also if you would like to try out with some examples go here.

#myCarousel {
  height: 100%;
  width: 100%;
}

.carousel-indicators {
  margin-bottom: 8px;
}

.carousel-indicators>li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.carousel-inner {
  height: 100%;
  background-color: #213B74;
}

.carousel-item {
  text-align: center;
}

.parent {
  min-height: 200px;
}

.carousel-item img {
  display: block;
  margin: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="parent d-flex justify-content-center">
        <img src="https://placehold.it/100x200/c0392b/000">
      </div>
    </div>
    <div class="carousel-item">
      <div class="parent d-flex justify-content-center">
        <img src="https://placehold.it/200x100/c0392b/000">
      </div>
    </div>
    <div class="carousel-item">
      <div class="parent d-flex justify-content-center">
        <img src="https://placehold.it/150x150/c0392b/000">
      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

score 1 · Answer 2 · answered Dec 14 '18 at 09:50

I have fixed your problem using the following code for the css:

#myCarousel {
    height: 100vh;
    width: 100%;    
}

.carousel-indicators {
    margin-bottom: 8px;
}

.carousel-indicators>li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.carousel-inner {
    height: 100%;
    background-color: #213B74;
}

.carousel-item {
   height: 100%;
}

.carousel-item img {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%)
}

So first of all, I gave the carousel a height of 100vh to fill the total height of screen (You can give it a fixed height as well). I then made the carousel-item height: 100% in order to make it the full height of carousel and then applied the carousel-item img code as above in order to move the image to the center both horizontally and vertically.

score 0 · Answer 3 · answered Dec 14 '18 at 10:08

You can achieve this with the align-items-center & align-content-center Bootstrap 4 flex classes. See example below :

.main-wrapper {
  width: 100%;
  height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="main-wrapper">
  <div class="h-100 w-100 d-flex flex-wrap align-items-center align-content-center">
    <div class="mx-auto">

      Content

    </div>
  </div>
</div>

Centering images (both vertically and horizontally) in Bootstrap 4 carousel

3 Answers3