How to vertically align CSS columns content?

I'm trying to build a simple layout with an unordered list, using CSS columns so I can organize its content in two columns if there are too many items in the list, so far I'm able to get this to work like this:

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

ul.product-list {
  position: absolute;
  height: 100%;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-columns: 2;
  columns: 200px auto;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

However, I'm trying to make it so that the list is vertically aligned at the center of the container when there are just a few items, so it looks like this:

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

.content {
  display: flex;
  align-items: center;
  height: 100%;
}

ul.product-list {
  position: absolute;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

Since the contents of the list will fill up dynamically,I want them to stay aligned at the center of the container, is this possible to achieve with this markup and css columns? If not, what would be a good way to get this layout to work?

Solution

change flex direction and add flex to blue container

.slide {
    width: 100vw;
    height: 500px;
    margin: 0 auto;
    background-color: rgb(163, 163, 163);
  }
  
  
    
    ul.product-list li.product-item {
        display: flex;
        align-items: center;
        break-inside: avoid;
    }
    
    ul.product-list li.product-item:not(:last-child) {
        margin-bottom: 10px;
    }
    
    ul.product-list li.product-item img {
        border-radius: 50%;
        margin-right: 10px;
        width: 74px;
        height: 74px;
    }

ul.product-list {
    list-style-type: none;
    width: 80vw;
    border: 2px solid blue;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    height: 100%;
    width: 90vw;
    border: 3px solid red;

    margin: 0 auto;
}

.product-item {

    border: 3px solid lime;
    padding: 1vh 1vw;
}

<section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>