How to Center a Divi Button

Trying to center a button in Divi and it just won’t budge? Whether you’re building a clean call-to-action or designing a centered hero layout, getting your button perfectly aligned can make or break your design. Fortunately, Divi gives you several simple ways to center a button—no coding required (unless you want to!). Here’s a complete guide to help you do it right.

Method 1: Use the Built-In Text Alignment Setting

This is the easiest and most recommended method for centering a button in Divi, especially when using a single column layout.

1. Open your page in the Divi Visual Builder.
2. Click on the gear icon to open the Button Module Settings.
3. Navigate to the Design tab.
4. Click on the Alignment section (usually labeled “Text” or just “Alignment” depending on your Divi version).
5. Select the center align icon.

💡 Note: This method works best when your button is in a single-column row or container. If you’re placing it next to other elements, the surrounding layout may impact the result.

Method 2: Use Auto Margins for Manual Centering

If the alignment setting doesn’t work (which can happen depending on your module placement or theme customizations), you can center the button using margins.

1. With the button’s settings open, go to the Design tab.
2. Scroll down to the Spacing section.
3. In the Margin settings, set the following:
   • Left Margin: auto
   • Right Margin: auto
4. Ensure that the Top and Bottom margins have appropriate values (e.g., 20px) if spacing is needed vertically.

Why This Works: In CSS, setting both left and right margins to auto tells the browser to evenly distribute horizontal space around the element, which effectively centers it within its container.

Method 3: Center the Entire Column

Sometimes the button isn’t the problem—the column it’s in might be misaligned. Here’s how to check and fix that:

1. Click on the Column settings (gear icon) inside the row that holds your button.
2. Go to the Design tab → Sizing.
3. Ensure that Width or Max Width is set to 100% or left as default.
4. Under Spacing, make sure there is no left or right padding that would offset the button.

Tip: If you’ve added multiple modules in one row, consider placing the button in its own row or column to have better control over alignment.

Bonus Tip: Full-Width Buttons

Want your button to stretch across the full width of its column? Here’s how:

1. Open the Button Module Settings.
2. Go to the Design tab → Sizing.
3. Set both Width and Max Width to 100%.

When used in a single-column layout, this will create a modern, full-width CTA button effect.

Troubleshooting Tips

• Still not centered? Try placing the button inside a dedicated row with a single column to eliminate layout conflicts.
• Using multiple buttons? Wrap each in its own row or add a text-align: center; custom CSS to the parent container.
• Custom CSS interfering? Check for custom styles applied to buttons in Divi Theme Options or in your child theme’s stylesheet that may override module settings.

Final Thoughts

Centering a button in Divi can usually be done in seconds, but small layout quirks or container settings can sometimes get in the way. Start with the built-in alignment settings, and if that fails, use spacing or sizing techniques to manually control layout behavior. With these methods, you’ll always have a centered, polished call-to-action that fits your design perfectly.

More On Divi Buttons