Problem to centralize CarouselCaption

[Aristides-Matoca]

Issue description

• components: CarouselCaption
• reactstrap version #9.2.0
• import method umd/csj/es
• react version #18.2.0
• bootstrap version #5.3.2

What is happening?

I can't to centralize the component CarouselCaption

Whenever I try to centralize the component using CSS. I mean the component just go down, but it doesn't go up and 'align-itens: center' and 'justify-content: center'

What should be happening?

I think should be centralizing the CarouselCaption

I want to centralize CarouselCaption and I need your help

Steps to reproduce issue

1. ...
2. ...

Error message in console

paste error message with stacktrack here

Code

const slides = items.map((item) => {
return (
<CarouselItem onExiting={() => setAnimating(true)} onExited={() => setAnimating(false)} key={item.src}>

            <div style={{ width: '100%', paddingTop: '50%', position: 'relative' }}>
                <img
                    src={item.src}
                    alt={item.altText}
                    style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}
                />
            </div>

            {/*It was adapted by me, and even like this, doesn't work, unfortunately*/}
            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', transform: 'translate(0%, 170%)'}}>
            <CarouselCaption
                captionText={item.subtitle}
                captionHeader={item.caption}
            />

            </div>
        </CarouselItem>
    );
});