fbpx

How to Vertically Center Content in Divi

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!

Kristen Leigh | WordPress Web Design Studio | Divi Theme How To Vertically Center Content in Divi

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).

Kristen Leigh | Web Design Studio | Content That is Not Vertically Centered

And this is the same content after it HAS been vertically aligned (top to bottom) using the CSS below.

Kristen Leigh | Web Design Studio | Vertically Center Content in Divi

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.

  1. Hover over Divi in the left-hand menu (to locate this, make sure you’re on the dashboard page of your WordPress website)
  2. Select Theme Options
  3. Scroll down to where you see Custom CSS
  4. Paste the code below into the Custom CSS field and press Save

.ds-vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}

Now you want to open the page you want to vertically center content on using the Divi Builder.

  1. Open the Row Settings
  2. Go to the Design tab
  3. Click Sizing
  4. Make sure Equalize Column Heights is set to YES
  5. Go to the Advanced tab
  6. Click CSS ID & Classes
  7. Paste ds-vertical-align into all of the Column CSS Class fields (ie. Column 1 CSS Class, Column 2 CSS Class, etc.)
  8. Click Save

Your content should now be vertically centered (top to bottom).

Want more Easy CSS and HTML Tricks?

You can learn even more quick and easy CSS and HTML to build a beautiful Divi website here.

-Kristen

You might also like…

Kristen Leigh | Web Design Studio | January 2019 Monthly Review of My Web Design Studio | How to Vertically Center Content in Divi
Kristen Leigh | WordPress Web Design Studio | Customize Your WordPress Website Using Easy CSS
Kristen Leigh | WordPress Web Design Studio | How To Vertically Align Content in Divi
Kristen Leigh | WordPress Web Design Studio | How to Customize the Divi Theme
Kristen Leigh | WordPress Web Design Studio | Web Designer Resource Library

MORE FREE DIVI RESOURCES!

Plus get instant access to 9+ resources to help you start and grow your web design business with ease!

4 Comments

  1. Hanneke de Graaf

    Hello Kirsten,

    Thank you very much for your clear instruction. It helped me a lot after trying everything!

    Reply
    • Kristen Leigh

      You’re very welcome Hanneke! I’m so glad that it helped you. I spent SO MUCH TIME trying to figure out how to do this so if I can save even a single person the struggle and time, I’m so glad!

      Reply
    • Kristen Leigh

      Hey there Nicolai! I spent hours looking for tutorials that would help me find this solution, so yes, “so much time” is accurate. After spending all that time, I wanted my audience to be able to find the solution easily. Divisoup’s code has been shared by a bunch of different web design bloggers. I didn’t realize that’s where the code came from (I’ve personally only browsed their website once) but I linked back to it in my post. Thanks for the heads up!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Hey there, I’m Kristen!

Kristen Leigh | WordPress Web Design Studio

My Favorite Tools

Affiliate Disclaimer

*Hey hey! Yes, there are affiliate links throughout the Kristen Leigh Designs website. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.