Vertical centre align heading text on hover over Impact (Brine) index gallery

Hello Squarespace Community!

I'm usually able to find the answers I need on here without having to ask the question myself, but this is the first time I've been stumped. I've read many similar questions to mine, but I haven't been able to find the answer I need, so I apologise if this has been asked before.

I'm using the Impact template (in the Brine family) and have an index gallery here:https://www.caveen.com/home#projects-home

I have used this CSS code to generate a coloured, transparent overlay with the image heading text when the image is hovered over:

    /* Gallery hover */
   .Index-gallery-item-content { 
      opacity: 0;
      transition: all .25s ease-in-out;
       min-width: 100%;
       min-height: 100%;
    }

   .Index-gallery-item-content:hover {
      opacity: 1 !important;
        transition: all .25s ease-in-out;
    }

The problem is I'm unable to get the heading text to align vertically in the centre of the overlay. When there is no

min-height

property, the text is vertically centralised, however then the overlay only reaches the height of the text, and I want it to cover the entire image, both for stylistic and UX purposes, as the hover will then trigger over the entire image, not just where the text will render. When the

min-height

property is set to

100%

, the text is anchored to the top of the overlay.

I've tried setting the heading text to display as a table cell that can be vertically aligned with this CSS code but to no avail:

.Index-gallery-item-content h2 {
 display: table-cell;
 vertical-align: middle;
}

Am I missing something? Any help would be much appreciated as I'm a CSS novice.

Thanks,Sam

@caveen Use

section#projects-home h2.Index-gallery-item-content-heading {
   position: absolute;
   top: 50%;
   transform: translate(0,-50%);
}

This is great, thanks so much @tuanphan!

That's just created one niggle that I've not been able to fix: when the heading text is short enough to only cover one line, the text is anchored to the left of the overlay rather than centre aligned. When the text is long enough to go over two lines or more, it is centre aligned as it should be.

I've added

text-align: center !important

to the CSS code you provided above, but it's having no effect.

Any ideas?

Thanks, Sam

@caveen Use width: 100%;

That worked a treat! Thanks for you help @tuanphan, it really is very appreciated. That had been bugging me for ages!