Perfect centering by assigning margin: auto to the flex container

In the following exercises, we will analyze examples from the real world where Flexbox can be used.

The most pressing problem that can be easily and elegantly solved using Flexbox is how to center the item vertically and horizontally so that the alignment is maintained when the item or container is resized.

The answer is simple: assign the flexbox layout to the container and margin: auto to the child flex item.

In this case, the flex item will shrink in size to match the content and will be centered along the vertical and horizontal axes.

It is worth paying attention to one interesting point. If you have several centered flex items in the container, then the margins between them will be uniform. In other words, the items will be arranged inside the flex container in a way that is somewhat similar to justify-content: space-around.

Let’s check this point on the basis of the example of a product card, in which the image is centered inside the block.