Overlaying Summary Heading and Summary Title over an image

Site URL: https://turncoat.squarespace.com/home

Hello! I have summary block sourcing from a gallery and set to display as a carouseI for just one item.

How can I center the Summary Heading "Color of the Week" and the Summary Title "Absinthe" in the center of the image? (see attached example).

.sqs-block-summary-v2 {

    .summary-title{

    }
    .summary-heading{

    }

}

Can you share link to your site?

--

I guess you can try CSS Flex with justify-content: center; align-items: center

or CSS position:absolute with transform: translate(-50%,-50%)

2 hours ago, tuanphan said:

Can you share link to your site?

--

I guess you can try CSS Flex with justify-content: center; align-items: center

or CSS position:absolute with transform: translate(-50%,-50%)

Sure: https://turncoat.squarespace.com/home and Thanks!

This seems to be working:

.summary-heading {
  z-index:99;
  position: absolute;
  text-align:center;
  top: 45%;
  left: 50%;
  width:100%;
  transform: translate(-50%, -50%);
   color:#fff;
 }

.summary-title{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family:"Adobe Caslon";
    color:#fff;
 }