Vertical Center Content in Full Screen Image

Support
#1

Hi,

I have a full-screen background image at the top of a page using “height:100vh;” I have text on top, and would like it to appear vertically centered no matter what the screen dimensions are. Is this possible? Link tot he page is int eh secure form. Any help would be greatly appreciated. Thanks!

#2

Hi Brad,

Thank you for writing in, since you applied height:100vh; to section, please set your section’s paddings and margins to 0. And also the margins and padding of your ROW, please set that to 0.

Then add this to Theme Options > CSS

.flexbox {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

Then apply, the Class flexbox to your ROW (not on the section)



Hope it helps,
Cheers!

#3

Thanks so much. I followed your instructions, but it still isn’t workin - in fact, now the content is aligned with the top of the page. Any idea what’s wrong? Thanks!

#4

Hi There,

The text inside isn’t vertical center because the height of row isn’t the same as section, please update the previous CSS to this:

.flexbox {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100vh !important;
}

For more information, please take a look at this:

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Hope it helps :slight_smile:

#5

perfect. Works! Thanks so much!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.