Centering button over Bootstrap 3 carousel - html

Question

I'm trying to center a button over a bootstrap 3 carousel, this button is hovering above the carousel.
I tried to wrap the button in a div class and center it with either text-align: center; or margin: 0 auto; without succes.
I can manually set margin-left of the .hover-class; this will work, but it's not perfectly centered. How to center my button?
This is my code:
HTML:
<!--The slider-->
<section>
<div class="hover-slide">
Let's go
</div>
<div id="slider-top" class="carousel slide" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>
<!--Wrapper for the the slide-->
<div class="carousel-inner">
<!--specify first slide-->
<div class="item active">
<img src="img/01.jpg" alt="Foto1">
<div class="carousel-caption">
<h3>TEST</h3>
</div>
</div>
<!--specify second slide-->
<div class="item">
<img src="img/02.jpg" alt="Foto2">
<div class="carousel-caption">
<!--Let's go-->
<h3>TEST SLIDE 2</h3>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My CSS:
.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;}

Answer 1

You need to wrap in column and add text-center class :
Fiddle : http://bootply.com/112692
Extract :
<section>
<div class="col-md-12 hover-slide text-center"> // <------ HERE
Let's go
</div>
<div id="slider-top" class="carousel slide col-md-12" data-ride="carousel"> // <------ HERE
<ol class="carousel-indicators">
<li data-target="#slider-top" data-slide-to="0" class="active"></li>
<li data-target="#slider-top" data-slide-to="1"></li>
<!--<li data-target="#slider-top" data-slide-to="2"></li>-->
</ol>