你可以使用JavaScript来实现，比如：

let sliders = document.getElementsByClassName("slider");
for (let slider of sliders) {
  let children = slider.querySelectorAll(".slick-slide");
  let ch = children[children.length - 1];
  let boundingRect = ch.getBoundingClientRect();
  let diff =
    slider.getBoundingClientRect().width -
    (boundingRect.x + boundingRect.width);
  slider.style.paddingLeft = `${diff / 2}px`;
}

Fiddle更新：https://jsfiddle.net/nmhsaxup/

和一个片段：

$(document).ready(function () {
  $(".responsive").slick({
    dots: true,
    infinite: false,
    speed: 300,
    variableWidth: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: false,
          dots: false,
          arrows: false,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  });
  let sliders = document.getElementsByClassName("slider");
  for (let slider of sliders) {
    let children = slider.querySelectorAll(".slick-slide");
    let ch = children[children.length - 1];
    let boundingRect = ch.getBoundingClientRect();
    let diff =
      slider.getBoundingClientRect().width -
      (boundingRect.x + boundingRect.width);
    slider.style.paddingLeft = `${diff / 2}px`;
  }
});

.slider.responsive {
  background-color: red;
}

h3 {
  border: 5px solid #000;
  background: #FFF;
  margin: 5px;
  text-align: center;
  line-height: 100px;
  padding: 10px
}

.slider.responsive {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<div class="slider responsive">
  <div>
    <h3>item 1</h3>
  </div>
</div>

<div class="slider responsive">
  <div>
    <h3>element 1</h3>
  </div>
  <div>
    <h3>elem 2</h3>
  </div>
</div>

<div class="slider responsive">
  <div>
    <h3>ab</h3>
  </div>
  <div>
    <h3>abc</h3>
  </div>
  <div>
    <h3>abcd</h3>
  </div>
  <div>
    <h3>foo</h3>
  </div>
  <div>
    <h3>bar</h3>
  </div>
  <div>
    <h3>xyz</h3>
  </div>
  <div>
    <h3>abcxyz</h3>
  </div>
  <div>
    <h3>8</h3>
  </div>
</div>