How do i vertically center or align text within a transparent white overlay on mobile device?

How do i vertically center or align text within a transparent white overlay in landscape view on mobile device?

This is the code I'm currently using for a 1/3 transparent white overlay with black text overlay.

The code with "padding: 10px 70px !important;" forces the text to two lines of copy in vertical display mode on a mobile device.

However, when I rotate the view of the mobile device to landscape view, the single line of text aligns 10px from the bottom of the transparent white overlay. I would like the single line of copy to be centered vertically within the transparent white overlay. See attached examples of what it is currently displaying, and an example of what I would like to achieve.

/*Mobile Portfolio 1/3 Overlay*/
@media screen and (max-width: 1000px) {
.portfolio-grid-overlay .grid-item .portfolio-text {
        opacity:1 !important
}
.portfolio-overlay {
	height: 30% !important;
	top: unset !important;
	bottom: 0 !important;
	opacity: .7 !important;
}
.portfolio-text {
	justify-content: flex-end !important;
  	padding: 10px 70px !important;
    }
}

Thank you.

I just solved a case yesterday, I used this code

@media screen and (max-width:767px) {
.portfolio-text {
    justify-content: flex-end !important;
    top: unset !important;
    background-color: rgba(255,255,255,0.5) !important;
}
.portfolio-overlay {
    opacity: 0 !important;
}
}

If it doesn't work for your case, you can share page url, we can check it again easier