Center align a Google Recaptcha field within Contact Form 7 (WP) - css

Question

Really struggling to center align a Recaptcha within a Contact 7 form.
I've tried multiple solutions from Google but none have worked.
I don't know which bit is needed, so here is the element:
<div role="form" class="wpcf7" id="wpcf7-f116-p87-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/contactus/?w3tc_note=flush_all#wpcf7-f116-p87-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;"> <input type="hidden" name="_wpcf7" value="116"> <input type="hidden" name="_wpcf7_version" value="5.0.4"> <input type="hidden" name="_wpcf7_locale" value="en_US"> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f116-p87-o1"> <input type="hidden" name="_wpcf7_container_post" value="87"> </div>
<p><label> Your Name (required)<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Email<br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Phone Number<br> <span class="wpcf7-form-control-wrap tel-563"><input type="tel" name="tel-563" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false"></span> </label></p>
<p><label> Subject<br>
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Your Message<br>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><label> Please confirm you're a human</label></p>
<div class="wpcf7-form-control-wrap">
<div data-sitekey="XXXXXXXXXXXXX" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha">
<div style="width: 304px; height: 78px;">
<div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=XXXXXXXXXXXXX-nrxCQzWkg_6m86NQ2Veyo&co=aHR0cDovL3ZrMWhhaXIuY28udWs6ODA.&hl=en&v=v1540189908068&size=normal&cb=39arzn19kut6" width="304" height="78" role="presentation" name="a-7up0lnyvb9r4" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div>
</div> <noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=XXXXXXXXXXXXX-XXXXXXXXXXXXX" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe> </div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea> </div>
</div>
</div>
</noscript>
</div>
<p> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
Another user said it may be easier to see it, so I've uploaded the above code onto an html here: http://stargazysolutions.com/users/test.htm
Just wanting to get the recaptcha centered in the middle of the page.
Any ideas?
Thanks

Answer 1

Add this code to your theme's style.css file, save it and check your WordPress contact page again where you published this form.
.wpcf7-recaptcha > div {
margin: 0 auto;
}
Note: It will make effect all CF7 forms and make all Recaptcha fields center align.