title: How to use translateX to center images in Bootstrap 3 carousel with fixed height and responsive width?
body: <p>I've got a carousel that has a width:100% and a height:831px on a fluid layout. I am having problems centering the images that are 3600px wide by 831px high. I need the images to be centered on all viewport widths and resolutions.</p>
  
  <p>I've tried to use transform:translateX, but the images always end up at left:0.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;div class="mainTopVisual clearfix"&gt;
            &lt;div id="m_top-visual" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                &lt;li data-target="#m_top-visual" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                &lt;li data-target="#m_top-visual" data-slide-to="1"&gt;&lt;/li&gt;
                &lt;li data-target="#m_top-visual" data-slide-to="2"&gt;&lt;/li&gt;
                &lt;li data-target="#m_top-visual" data-slide-to="3"&gt;&lt;/li&gt;
                &lt;li data-target="#m_top-visual" data-slide-to="4"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                &lt;div class="item active"&gt;
                  &lt;img class="first-slide" src="images/main/j1.jpg" alt="First slide"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;img class="second-slide" src="images/main/j2.jpg" alt="Second slide"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;img class="third-slide" src="images/main/j3.jpg" alt="Third slide"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide"&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev"&gt;
                &lt;span class="main_top-visual flaticon-left-arrow" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next"&gt;
                &lt;span class="main_top-visual flaticon-next" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
              &lt;div id="carouselButtons"&gt;
                &lt;button id="playButton" type="button" class="btn btn-default"&gt;
                  &lt;span class="flaticon-arrows-3"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;button id="pauseButton" type="button" class="btn btn-default"&gt;
                  &lt;span class="flaticon-pause-bars"&gt;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;!-- /.carousel --&gt; 
          &lt;/div&gt;
  </code></pre>
  
  <p>and this is the CSS:</p>
  
  <pre><code>&lt;style&gt;
  div.mainTopVisual{
  margin-top:0;
    padding-top:0;
    padding-bottom:0;
  }
  .m_top-visual_inner{
    width:100%;
    margin:0;
    position:relative;
  }
  .carousel {
    height: 831px;
    margin-bottom:0;
  }
  .carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;}
  .carousel .item {
    height: 831px;
    width:3600px;
    background-color: #000;
  }
  .carousel-inner &gt; .item &gt; img {
    position: absolute;
    width:3600px;
    height:831px;
    top:0;
    left:50%;
    transform:translate(-50%, 0);
    max-width:none;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Thank you very much in advance for your help.</p>