Horizontally center-align a bootstrap button with accompanying text

Question

I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?

<div class="col-md-12 well">
    <div class="col-md-6">
        <h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
    </div>
    <div class="col-md-6 text-center">
        <span><em> Already have an account? Login</em></span>
    </div>
</div>

I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.

Answer 1

Use col-md-offset-3 along with col-md-6 to center align your content:

<div class="col-md-offset-3 col-md-6">
   ...
</div>

Further more, set text-center class on the outside div and not on span tag:

<div class="col-md-offset-3 col-md-6 text-center">
    <em> Already have an account? Login</em>
</div>

See fiddle here.