如何实现slick slider的slide滑块内部各类元素的居中显示

问题原因 #

你当前的CSS写法存在两个核心错误，导致居中效果不生效：

• 使用了JSX内联样式的驼峰命名（textAlign/justifyContent/alignItems），原生CSS不识别这类写法，需要改为标准CSS短横线分隔的属性名
• justify-content、align-items是Flex布局的专属属性，你没有给.slick-slide开启Flex布局，同时默认的float: left也会破坏Flex布局效果

解决方案 #

场景1：仅需要水平居中所有内部元素

直接添加以下CSS即可，适配文本、图片、链接等所有类型的子元素：

.slick-slide {
    text-align: center;
}

场景2：需要水平+垂直双向居中内部元素

用以下CSS覆盖slick的默认样式即可：

.slick-slide {
    float: none !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    /* 若同时需要子元素内部文本居中可以再加一行 text-align: center */
}

加!important是为了避免被slick自带的高优先级默认样式覆盖，实际使用时如果自定义样式优先级足够也可以去掉。

内容的提问来源于stack exchange，提问作者Niana