Center React-Multi-Carousel in Center mode

Question

I just started using react-multi-carousel which I really like! Now I face an issue that I was not yet able to solve: If I use "Center mode" (centerMode={true}), I am not able to center the carousel. As soon as I change the surrounding div to display: flex; justify-content: center;, the carousel disappears or gets really small. It seems that the carousel in this mode calculates the available space within the surrounding container and uses the information for the rendering. At the same time, the flex wants to know, how much space the carousel occupies for centering. This is causing problems for me. This is only relevant for big screens where all items of the carousel are visible at once - in this case, I would like to have it centered. Does anyone know if and how it is possible to do that?

Here is an Example - Please let me know if you can not open it

Answer 1

Thanks for providing a minimal reproducible example,

For using display: flex, you should have a container that has the flexbox style. (for more details click here)

you can see that there is no difference between good and badStyle if you use the following to define it:

const badStyle = {
    display: "block",
    justifyContent: "center"
};