title: Centering button over Bootstrap 3 carousel
body: <p>I'm trying to center a button over a bootstrap 3 carousel, this button is hovering above the carousel. </p>
  
  <p>I tried to wrap the button in a div class and center it with either text-align: center; or margin: 0 auto; without succes. </p>
  
  <p>I can manually set margin-left of the .hover-class; this will work, but it's not perfectly centered. How to center my button? </p>
  
  <p>This is my code: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!--The slider--&gt;
  &lt;section&gt;
      &lt;div class="hover-slide"&gt;
              &lt;a href="#page-intro" class="btn btn-default start-me"&gt;Let's go&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="slider-top" class="carousel slide" data-ride="carousel"&gt;
  
          &lt;!--Indicators--&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#slider-top" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#slider-top" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;!--&lt;li data-target="#slider-top" data-slide-to="2"&gt;&lt;/li&gt;--&gt;
          &lt;/ol&gt;
  
  
      &lt;!--Wrapper for the the slide--&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;!--specify first slide--&gt;
          &lt;div class="item active"&gt;
              &lt;img src="img/01.jpg" alt="Foto1"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;TEST&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--specify second slide--&gt;
          &lt;div class="item"&gt;
              &lt;img src="img/02.jpg" alt="Foto2"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;!--&lt;a href="#page-intro" class="btn btn-default start-me"&gt;Let's go&lt;/a&gt;--&gt;
                  &lt;h3&gt;TEST SLIDE 2&lt;/h3&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My CSS: </p>
  
  <pre><code>.hover-slide {
      position: absolute;
      /*margin-left: 30%;*/
      z-index: 10;
  }
  
  
  .carousel .item {
      width: 100%;
      height: 100%;
   }
  
  .carousel .item img {
      width: 100%;
      height: 100%;
  }
  
  .btn.start-me {margin: 0 auto;}
  </code></pre>