slick.jsプラグインで画像を中央表示にしたい

Question

前提・実現したいこと

jqueryプラグイン「slick.js」を使いTOP画像が一定時間で変わるようにしている。
画像が中央表示できず、左上固定になってしまう。
画像を中央表示したい。

発生している問題

画像を中央表示にしたいが、
左上固定になってしまう。

[参考画像]

該当のソースコード

JS

// slick
        $(document).ready(function(){
         $('.slick').slick({
           cssEase: 'ease',
           autoplay: true,
           autoplaySpeed: 3500,
           fade: true,
           adaptiveHeight: false,
           centerMode: false,
           arrows:false,

CSS(scss)

.slick.slick-initialized {
		  display: block;
		  opacity: 1;
		}

		.eyecatch {
		  width: 100%;
		  height: 400px;
		  border: dashed 1px;

			ul {
				width: 100%;

				li{
					object-fit: cover;
					width: auto;
					height: 600px;
				}
			}
		}
		.slick img {
			width: 100%;
		}

HTML

<div class="eyecatch">
      <ul class="slick">
        <li><img src="assets/img/slick-02.png" alt="画像"></li>
        <li><img src="assets/img/slick-03.png" alt="画像"></li>
        <li><img src="assets/img/slick-04.png" alt="画像"></li>
      </ul>
    </div>

試したこと

• centerMode: true,
• variableWidth: true,
• CSSのul,li,imgそれぞれにmargin: auto;

補足情報

特にないです。

Answer 1

こちらの記事を元に、
cssを整理しまして、
vh,vw,100%などを使い分けたらできるようになりました。

https://teratail.com/questions/125502?link=qa_related_pc_sidebar

閲覧くださった方、ありがとうございます。