How to center reCAPTCHA element with CSS

If you are a designer and want to see elements of a webpage centered, don't worry about it, you don't have any kind of obsessive compulsive disorder. When there's space around an element (both sides, right and left) it's pretty nice to center the element so the space doesn't stay at a single side.

With the famous reCAPTCHA element, centering the checkbox can be pretty hard to achieve if you don't know which CSS rules apply to which element respectively, that's why in this article we'll share with you a simple way to center this element inside your forms.

As first, the necessary logic to center this element is to center the text inside the container of the reCAPTCHA element, so you can wrap this element inside a div and set the display rule of the recaptcha element to inline-block, so you can create 2 classes for this:

<style>
    .text-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>

<div class="text-center">
    <div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>
</div>

Or alternatively, define the inline styles:

<div style="text-align: center;">
    <div
        class="g-recaptcha" 
        data-sitekey="YOUR SITE KEY" 
        style="display: inline-block;"
    ></div>
</div>

With the mentioned solution, your reCAPTCHA element will be centered in the page.

Happy coding !