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

simply use image on absolute if your slider height is fixed

  
  

    

    

    

  

  
  

    

      

        
      
    
    

      

        
      
    
    

      

        
      
    
  

  
  
    
    Previous
  
  
    
    Next
  

css

.carousel {
  width: 500px;  /*test width*/
  height: 300px; /*what ever height */
}

.middle {
  position: relative;
  height: 300px; /*what ever height */
}

.middle img {
  max-width: 100%;
  max-height: 100%; /*what ever height */
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

see fiddle