In this step by step tutorial, you’ll learn the custom CSS you need to vertically center any piece of content using the Divi theme and page builder. This beginner tip is easy and will make a huge difference on your WordPress website layout!
how to vertically center content in divi
When I first started designing and building websites on WordPress using Divi, I was so frustrated when I couldn’t get content to vertically align. All I wanted was for the content in two columns to be centered, not from right to left but from top to bottom.
I added an image to a column on the left side of the page and text to a column on the right side of the page. Both of these pieces of content started at the top of the row which meant the image took up the whole screen top to bottom and the text only took up half the screen top to bottom.
It looked terrible! After spending hours Googling “how to center content in Divi,” finding mostly information on how to center content left to right instead of top to bottom, and reading or watching a bunch of tutorials I finally found something that worked.
You don’t need to go through the same trouble I did to figure out how to do something that’s so simple but that makes a HUGE impact on the visual appearance of your design. I’m sharing the exact steps with you today!
From This to That
First I want to make sure you really understand what I mean by my super technical terminology: top to bottom, not left to right (that’s advanced web development speak, right?).
This is content that has been added to two columns in Divi but HAS NOT been vertically aligned (top to bottom).
And this is the same content after it HAS been vertically aligned (top to bottom) using the CSS below.
CSS to Vertically Center Content in Divi
Here’s what you need to do!
First you need to add a bit of CSS to the Custom CSS field in Divi.
- Hover over Divi in the left-hand menu (to locate this, make sure you’re on the dashboard page of your WordPress website)
- Select Theme Options
- Scroll down to where you see Custom CSS
- Paste the code below into the Custom CSS field and press Save
Now you want to open the page you want to vertically center content on using the Divi Builder.
- Open the Row Settings
- Go to the Design tab
- Click Sizing
- Make sure Equalize Column Heights is set to YES
- Go to the Advanced tab
- Click CSS ID & Classes
- Paste ds-vertical-align into all of the Column CSS Class fields (ie. Column 1 CSS Class, Column 2 CSS Class, etc.)
- Click Save
Your content should now be vertically centered (top to bottom).
Want more Easy CSS and HTML Tricks?
You might also like…
MORE FREE DIVI RESOURCES!
Plus get instant access to 9+ resources to help you start and grow your web design business with ease!