styling a caption to the center of a slider in react

Question

I am trying to center a caption texts to a sliders that I have created in react using react-slick, the problem I am getting is that when I use the CSS property text-align: center in the caption div the application takes the length of my slides as the length of the screen and place the caption only in the centered slide(each slide takes the whole screen width then slide to the next),I cannot also do the CSS property right: 0px; as this also remove all the other captions and set the caption of the first slider at the end of my slider in the next div. How can I go about this and set the caption of each div center in relative to its slide? the codes look like this:

import React from 'react';
import Slick from 'react-slick';
import './slider.css';
import { Link } from 'react-router-dom';

const SliderTemplates = (props) => {
    let template = null;
    const settings = {
        dots: true,
        infinite: true,
        arrows: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
    };
    switch (props.type) {
        case 'featured':
            template = props.data.map((item, i) => {
                return (
                    <div key={i}>
                        <div className="featured_item">
                            <div
                                className="featured_image"
                                style={{
                                    background: `url(../images/articles/${item.image})`,
                                }}></div>
                            <Link to={`/articles/${item.id}`}>
                                <div className="featured_caption">{item.title}</div>
                            </Link>
                        </div>
                    </div>
                );
            });
            break;
        default:
            template = null;
    }
    return <Slick {...settings}>{template}</Slick>;
};

export default SliderTemplates;

CSS code is as follows

.featured {
position: relative;
}
.featured_item a {
    position: absolute;
    width: 100%;
    bottom: 0px;
    text-decoration: none;
}
.featured_image {
    height: 500px;
    background-size: cover !important;
    background-repeat: no-repeat;
}

.featured_caption {
    text-align: center;
    color: #eaf205;
    top: 0px;
    padding: 20px;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 20px;
}

Answer 1

I have the same problem you can add this CSS into your component, I hope that's worked for you!

.slick-slide > div {
    display: grid;
    place-items: center;
}