align-content: center;

align-content: center; 表示将 flex 容器中的所有 flex 项在交叉轴上居中对齐。如果 flex 容器只有一行，则该属性不起作用。该属性只有在 flex-wrap 属性设置为 wrap 或 wrap-reverse 时才会生效。

相关问题

align-content: center;是什么意思

`align-content: center;` 是CSS属性，用于设置容器内部的多行内容在交叉轴方向（即垂直方向）上的对齐方式，将多行内容居中对齐。

具体来说，当容器内部有多行内容时，如果这些行高加起来的总和小于容器的高度，那么`align-content: center;`将会使这些行在容器的交叉轴方向上居中对齐，即使它们的高度不相等。

如果多行内容的高度总和大于容器的高度，则`align-content: center;`不会起作用，而是会根据其他的属性（如`align-items`）来进行对齐。

需要注意的是，`align-content`只对多行内容有作用，对于只有一行内容的容器，使用`align-items`属性来设置交叉轴方向上的对齐方式。

display: inline-flex; 导致 align-content: center 失效

A：当使用display: inline-flex;作为容器的属性时，align-content属性将失效。这是因为align-content属性仅适用于flex容器，而不适用于inline-flex容器。此时，我们可以考虑使用align-items属性来对齐flex项目。如果需要在inline-flex容器中使用align-content属性，请将容器的display属性更改为flex，这样align-content属性才会生效。