样式
外观
使用 margin: auto 在 Flexbox 或 Grid 布局中实现元素居中。
在 Flexbox(弹性盒子)或 Grid(网格)布局中,margin: auto 有一个特殊的行为。当一个元素的 margin 设置为 auto,并且该元素位于一个设置了 display: flex 或 display: grid 的容器中时,该元素会自动吸收容器中的多余空间,从而实现居中。
这种行为的背后有一个 CSS 规范,即在这些布局上下文中,任何正处于空闲的空间都会分配到设置了 margin: auto 的元素的该方向的自动 margin 中去。