How to Center Google’s No CAPTCHA reCAPTCHA on Your Website -

Google’s No CAPTCHA reCAPTCHA (v2 Checkbox) is a popular way to prevent spam and bots on forms. However, by default, it aligns to the left, which may not match your design. Here’s how to center it easily using CSS.

Method 1: Using `text-align` on the Parent Container

The simplest way to center the reCAPTCHA widget is by wrapping it in a <div> and applying text-align: center:

<div class="recaptcha-container">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
</div>

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

This works because the reCAPTCHA widget is an inline-block element.

Method 2: Using Flexbox for More Control

If you need precise alignment, Flexbox is a great solution:

.recaptcha-container {
    display: flex;
    justify-content: center;
}

Method 3: Using Margin Auto (If reCAPTCHA is Block-Level)

If you force the widget to be a block element, you can center it with margin: auto:

.g-recaptcha {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

Important Notes

reCAPTCHA Width: By default, the widget has a fixed width. If your container is too narrow, it may overflow or break the layout.
Mobile Responsiveness: Test on mobile devices—sometimes additional adjustments are needed.
Invisible reCAPTCHA: If you’re using Invisible reCAPTCHA, centering isn’t necessary since it binds to a submit button.

Final Code Example

Here’s a complete example with Flexbox:

<!DOCTYPE html>
<html>
<head>
    <title>Centered reCAPTCHA Example</title>
    <style>
        .recaptcha-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <form>
        <!-- Your form fields here -->
        <div class="recaptcha-container">
            <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Conclusion

Centering reCAPTCHA is simple with CSS—whether using text-align, Flexbox, or margin: auto. Choose the method that best fits your layout and ensures a seamless user experience.

Have questions or other tricks for styling reCAPTCHA? Share them in the comments!

Method 1: Using text-align on the Parent Container