Bootstrap carousel with fixed height: center image horizontally or vertically based on image dimensions

Question

I have a bootstrap carousel with a fixed height. Here is the CSS:

.carousel-custom .carousel-outer {
  position: relative;
}


@media(min-width: 992px){
    .car         


        

Answer 1

Since the .item elements are relative positioned you could just position the img elements absolutely. Giving the .item elements a fixed height, will help to vertically and horizontally align the images inside.

I'm sure there are lots of different ways to do this, here is one example. Hope it helps.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background-color: black;
}

.carousel-inner > .item {
  height: 100vh;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 800px;
  width: auto;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

  


    
    

      

      

      

    

    
    

      

        
      
      

        
      
      

        
      
    

    
    
      
      Previous
    
    
      
      Next