css弹性模盒居中 |css 图片 变灰

.center {
display: flex; /* 将容器设置为 flex */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

这里，大家定义一个class为center的容器，在CSS中设置display为flex，这将使得该容器内的元素变成弹性盒子。接着使用justify-content属性和align-items属性居中该容器。这样就可以达到大家想要的效果。

另外，还有一些其他的属性可以进一步定制弹性盒子。例如，大家可以使用flex-direction属性来定义弹性盒子内元素的排列方式，包括row（水平方向）、column（垂直方向）、row-reverse（水平反向）、column-reverse（垂直反向）。

.container {
display: flex;
flex-direction: row-reverse; /* 设置元素从右向左排列 */
justify-content: center;
align-items: center;
}

通过这些属性，大家可以快速、简便地实现网页布局中的盒子居中效果，并且可根据需求进行进一步的定制。