Page Hero center heading

.page-hero {
	background-image: linear-gradient(180deg, #2d5488 0%, #3ab3d7 100%);
	min-height: 21vh;
	color: #fff;
}
.inside-page-hero {
	position: relative;
    vertical-align: middle;
}
.page-hero h1 {
	font-weight: 600;
}

Hi there,

So you don't want the text to center?

What's your horizontal alignment setting here?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

Let me know :)

Hey,

Yea i want it centered.. also centered vertically ... But I am using VH as the container height..

Edit your CSS to this:

.page-hero {
    background-image: linear-gradient(180deg, #2d5488 0%, #3ab3d7 100%);
    min-height: 21vh;
    color: #fff;
    display: flex;
    align-items: center;
}

Holy smoke ;) Thank you very much!

Flexbox is super useful for things like this if you are interested:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Glad I could help :)

Thanks !

No problem :)