Carousel Center

                    <section class="flex items-center justify-center p-8">
  <div class="carousel carousel-center rounded-box">
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1550439062-609e1531270e"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1537884944318-390069bb8665"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1542831371-29b0f74f9713"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb"
        alt="Coding" />
    </div>
    <div class="carousel-item">
      <img
        src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
        alt="Coding" />
    </div>
  </div>
</section>

<style>
  .carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
  }
  
  .carousel-center {
    scroll-snap-type: x mandatory;
  }
  
  .carousel-center .carousel-item {
    scroll-snap-align: center;
  }
  
  .carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  
  .carousel-item img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  
  .rounded-box {
    border-radius: 0.5rem;
  }
</style>