Centering No Captcha reCaptcha

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
}

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>

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.

This css works fine for me:

.g-recaptcha{
   margin: 15px auto !important;
   width: auto !important;
   height: auto !important;
   text-align: -webkit-center;
   text-align: -moz-center;
   text-align: -o-center;
   text-align: -ms-center;
}

I don't like the idea of hardcoding 304px in my .scss

The g-recaptcha html is generated as:

<div class="g-recaptcha" ... >
  <div style="width: 304px; height: 78px;">
    <div>
      <iframe ... ></iframe>
    </div>
    <textarea ... ></textarea>
  </div>
</div>

This horizontally centres the first inner div (which specifies width=304px).

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

This CSS style works well for me.

.g-recaptcha > div:first-of-type {
	margin: 0 auto;
}

Edit: This answer is pretty much the worst one in the chain. Use some other one please.

Try adding

width: 50%;

to your css. I looked at another answer and it said that

display: block;

is for IE.

this code will be worked.

<div align="center" class="g-recaptcha" data-sitekey="your key code"></div>

What russianmario says does infact work, but instead of hard coding the 304px in you can just use the fit-content.

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

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

Use this style in your page:

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

If anyone is using reCaptcha with Bootstrap you can do the following:

<div class="text-center">
<div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-10">{{> reCAPTCHA}}</div>
    <div class="col-sm-1"></div>
</div>

.text-center{text-align:center;}

The following css worked perfectly for me by wrapping the reCaptcha in a div and adjusting the padding-left value until I got the reCaptcha centered.

<style>
.g-recaptcha div { margin: 0 auto; padding-left: 70px;}
</style>

With Bootstrap 4 you can easily do this by creating a div containing with a class of text-center. Then add to the g-recaptcha class tag d-inline-block

<div class="text-center"><div class="g-recaptcha d-inline-block" data-sitekey="your-site-key-here"></div></div>

for primefaces you can do:

<div class="text-center captcha">
     <p:captcha label="Captcha" size="100%"/>
</div>

---

.captcha>div>div{
    text-align: center !important;
    margin: 0 auto !important;
}

<style>
#capatcha {
margin: 0 auto;
display block;
}
</style>
<!-- reCapatcha -->
<div style="width: 100px; border: solid 1px;"
<div id="capatcha">
<div class="g-recaptcha" data-sitekey="">1234</div>
</div>
</div>    

tested on blank page works.