Centering No Captcha reCaptcha

Question

After a few hours of research and trial and error, I was finally able to add the new Google No Capatcha re Capatcha to my form and get it working, but for some reason, it won't center. Any ideas?

<!-- reCapatcha -->
<div id="capatcha">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>


#capatcha {
    margin: 0 auto;
    display: block
}

Answer 1

I went with:

<style>
    /* already defined in bootstrap4 */
    .text-xs-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>
<div class="text-xs-center">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>

Answer 2

This is similar to other answers, but I thought worth sharing. I don't like hard-coding values, but the width of the No Captcha reCAPTCHA appears to be 304px, so you could use that as your width:

<style>
div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}
</style>

<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey=""></div>

This should center the reCAPTCHA exactly.