要同时水平和垂直居中,有两个简单的选项:
第一
.outer { display:flex; } .inner { margin:auto; }
第二
.outer { display: flex; justify-content: center; align-items: center; }
有什么不同?在什么情况下我们会使用一个而不是另一个?
在你的第一个例子中......
.outer { display: flex; } .inner { margin: auto; }
... auto
保证金仅适用于灵活项目和集中在容器内的一个弹性项目.
在你的第二个例子中......
.outer { display: flex; justify-content: center; align-items: center; }
您是集装箱级别的中心项目.此代码将以所有项目为中心.
另外,请记住,如果您同时使用这两种方法,则margin: auto
应该占上风.
8.1.与自动边距对齐
在通过
justify-content
和进行对齐之前align-self
,任何正的自由空间都会分配到该维度中的自动边距如果将自由空间分配给自动边距,则对齐属性在该维度中将不起作用,因为边距将在弯曲后窃取剩余的所有可用空间.
但是,出于实际目的,最重要的区别可能是当flex项超过容器大小时的行为.发生这种情况时,在使用容器级代码时,您将无法访问项目的某些部分.该项目从屏幕上消失,无法通过滚动访问.
要解决此问题,请使用margin: auto
居中以正常工作.
这是一个更完整的解释:
无法滚动到溢出容器的弹性项目的顶部
垂直和水平居中放置柔性物品(参见方框#56)
IE错误:
Flex自动边距在IE10/11中不起作用
Flexbox自动边距不适用于IE中的justify-content:center