How to align blocks to the center of the container?

Question

css

In general, there is a block with elements.
Isotope plugin is used

.work-items
        display: flex
  flex-wrap: wrap
  justify-content: center

JS

var $grid = $('.work-items').isotope({
    itemSelector: '.work-container_item'
  });
  $('.work-buttons').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });

everything is perfect, the plugin works, filters the content, BUT
when the screen narrows, the following happens:

the block itself is in the center, but the elements go in turn, and since they have a fixed height and width , they are transferred to the new one when they reach the end of the line.
How to make sure that these 3 blocks that fit in were in the center of the page?
Maybe there is a property in the plugin, or somehow through css?

Answer 1

margin: auto ?