使用“Margin: Auto”将元素垂直居中
虽然“margin: auto”有效地水平居中元素,但其垂直对齐功能可能会有限的。这是由于块盒垂直堆叠的方式以及边距折叠的可能性造成的。
根据 CSS2.1 第 10.6.2 节,块盒在正常流程中从上到下堆叠。在某些情况下,垂直边距可能会折叠、归零。如果包含块具有自动高度并且只有一个块框,则其顶部和底部边距本质上为零。
对于同一流中的多个块框或影响流入的流外框布局,解决自动边距变得更加复杂。这扩展到内联元素和浮动,其中自动左右边距设置为零,以避免与行框干扰。
相反,绝对定位的框不会注意到同一定位上下文中的其他框。因此,可以仅根据它们的包含块来计算自动顶部和底部边距。
Flexbox 为 Flex 项目提供了独特的解决方案,这些项目在 Flex 格式化上下文中完全了解彼此。 Flexbox 中的垂直边距遵循不同的规则,允许更精确地控制元素对齐。
以上是为什么'边距:自动”不垂直居中元素?的详细内容。更多信息请关注PHP中文网其他相关文章!