html – 保证金之间有什么区别：auto和justify-contentalign-items center？

概述要同时水平和垂直居中,有两个简单的选项： 第一 .outer { display:flex;}.inner { margin:auto;} 第二 .outer { display: flex; justify-content: center; align-items: center;} 有什么不同？在什么情况下我们会使用一个而不是另一个？ 在你的第一个例子中…… .ou 要同时水平和垂直居中,有两个简单的选项：

第一

.outer {  display:flex;}.inner {  margin:auto;}

第二

.outer {  display: flex;  justify-content: center;  align-items: center;}

有什么不同？在什么情况下我们会使用一个而不是另一个？

解决方法 在你的第一个例子中……

.outer {  display: flex;}.inner {  margin: auto;}

…自动边距仅适用于d性项目,并且集中在容器中的一个d性项目中.

在你的第二个例子中……

.outer {  display: flex;  justify-content: center;  align-items: center;}

您是集装箱级别的中心项目.此代码将以所有项目为中心.

另外,请记住,如果您同时使用这两种方法,则以margin：auto should为准.

07001

Prior to alignment via justify-content and align-self,any
positive free space is distributed to auto margins in that dimension

If free space is distributed to auto margins,the alignment propertIEs
will have no effect in that dimension because the margins will have
stolen all the free space left over after flexing.

但是,出于实际目的,最重要的区别可能是当flex项超过容器大小时的行为.发生这种情况时,在使用容器级代码时,您将无法访问项目的某些部分.该项目从屏幕上消失,无法通过滚动访问.

要解决此问题,请使用margin：auto进行居中以正常工作.

这是一个更完整的解释：

> Can’t scroll to top of flex item that is overflowing container
> Center a flex item vertically and horizontally(见专栏#56)

IE错误：

> Flex auto margin not working in IE10/11
> Flexbox auto margins don’t work with justify-content: center in IE

总结

以上是内存溢出为你收集整理的html – 保证金之间有什么区别：auto和justify-content / align-items center？全部内容，希望文章能够帮你解决html – 保证金之间有什么区别：auto和justify-content / align-items center？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。