How to center text for slider in Mobile View?

Question

I'm trying to center the text within the slider for the Customizr Pro theme in mobile view. I prefer the offset version built into the theme with the transparent overlay underneath, but the lady wants everything on her site to be centered. I'm not a pro developer but offered my help because she initially just wanted a basic site.

I tried using the code to this answer here that was similar to the CSS I was using already but it didn't work:

How to align middle/center box with text in slider with responsive in mobile view ??

This is what I'm using to center the text, which appears to be fine in desktop view but mobile is not showing up at all:

.carousel-caption {
    max-width: 100% !important;
    padding: 0 !important;
    line-height: 14px !important;
    position: absolute !important;
    margin-left: unset !important;
    text-align: center !important;
    top: 175px !important;
    left: 0 !important;
    right: 0 !important;
}

The website is https://designerbackdrops.com

I still have one other issue with Safari and the tagline being off center but I'll ask about that in a different post.

Thanks for any suggestions you can offer. I'll try anything!

Answer 1

Here is a popular CSS trick for centering things. I have tried it on your website, and it works for desktop and mobile.

.carousel-caption {
    max-width: 100% !important;
    padding: 0 !important;
    line-height: 14px !important;
    position: absolute !important;
    margin-left: unset !important;
    text-align: center !important;
    top: 50%;
    left: 0 !important;
    right: 0 !important;
    bottom: auto;
    transform: translateY(-50%);
}

Basically the use of these two together should center the object:

top: 50%;
transform: translateY(-50%);

I also added bottom: auto; to override another stylesheet, tc_common.min.css .