How to center text hover in Squarespace?

Site URL: https://www.jeulianne.com/portfolio

Hello everyone, I have a Squarespace issue.

I am a beginner at coding. In my website, I have multiple short clips that automatically play and loop; they basically act like gifs. I achieved this by using code blocks. There is also a link inserted in each block for viewers to redirect to the full video.

This is an example of the code I have for one of my code blocks:

<a href="link here" target="_blank">
  <video class="video" width="100%" height="100%" autoplay loop playsinline>
    <source src="s/video.mp4" type="video/mp4">
    <source src="s/video.webm" type="video/webm">
    Sorry, your browser doesn't support HTML5 video.
  </video>
  <div class="overlay">
    <div class="text">
      <h3 class="text h3">The Secret Kingdom</h3>
    </div>
  </div>
</a>

In my Custom CSS, I added a hover effect for the code blocks, so viewers can hover their mouse cursor over the clips and click on them. I was able to achieve the black fade in and fade out transitions smoothly, but I can't seem to center the text properly. The position of the text appears differently in different devices.

This is the code I have so far:

/* ----- Block Hover ----- */
#block-yui_3_17_2_1_1589451992993_20908,
#block-yui_3_17_2_1_1589450893966_20367,
#block-yui_3_17_2_1_1589447618241_19753,
#block-yui_3_17_2_1_1589447618241_20564,
#block-yui_3_17_2_1_1589448047699_19059 {
  display: block;
  position: relative;
  width: auto;
}

#block-yui_3_17_2_1_1589451992993_20908 .video,
#block-yui_3_17_2_1_1589450893966_20367 .video,
#block-yui_3_17_2_1_1589447618241_19753 .video,
#block-yui_3_17_2_1_1589447618241_20564 .video,
#block-yui_3_17_2_1_1589448047699_19059 .video {
  width: 100%;
  height: 100%;
}
  
#block-yui_3_17_2_1_1589451992993_20908 .overlay,
#block-yui_3_17_2_1_1589450893966_20367 .overlay,
#block-yui_3_17_2_1_1589447618241_19753 .overlay,
#block-yui_3_17_2_1_1589447618241_20564 .overlay,
#block-yui_3_17_2_1_1589448047699_19059 .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #000000;
}

#block-yui_3_17_2_1_1589451992993_20908:hover .overlay,
#block-yui_3_17_2_1_1589450893966_20367:hover .overlay,
#block-yui_3_17_2_1_1589447618241_19753:hover .overlay,
#block-yui_3_17_2_1_1589447618241_20564:hover .overlay,
#block-yui_3_17_2_1_1589448047699_19059:hover .overlay {
  opacity: 0.85;
}

#block-yui_3_17_2_1_1589451992993_20908 .text,
#block-yui_3_17_2_1_1589450893966_20367 .text,
#block-yui_3_17_2_1_1589447618241_19753 .text,
#block-yui_3_17_2_1_1589447618241_20564 .text,
#block-yui_3_17_2_1_1589448047699_19059 .text {
  position: absolute;
  padding-top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#block-yui_3_17_2_1_1589451992993_20908 .text h3,
#block-yui_3_17_2_1_1589450893966_20367 .text h3,
#block-yui_3_17_2_1_1589447618241_19753 .text h3,
#block-yui_3_17_2_1_1589447618241_20564 .text h3,
#block-yui_3_17_2_1_1589448047699_19059 .text h3 {
  color: #FFFFFF;
  height: 100%;
  width: 100%;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

I'd appreciate some help on how to fix this. Are there any ways I can improve my code too?

Thank you in advance!

Solution

For your .text class try using this :

#block-yui_3_17_2_1_1589451992993_20908 .text,
#block-yui_3_17_2_1_1589450893966_20367 .text,
#block-yui_3_17_2_1_1589447618241_19753 .text,
#block-yui_3_17_2_1_1589447618241_20564 .text,
#block-yui_3_17_2_1_1589448047699_19059 .text {
  position: absolute;
  display: flex;
  align-items:center;
  justify-content: center;
  left: 50%;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}