如何用css flex实现垂直居中布局

需要明确的是，在Flex布局中实现垂直居中主要分为三个步骤：将父容器设置为Flex，使用align-items控制垂直度，使用horizo​​ntal-控制内容。
但有几个关键点应该在实践中使用。
我们先来说说最重要的事情。
当单个行元素垂直居中时，您只需为父容器添加一个高度值，例如3 00像素，然后将alignment-items设置为居中。
去年我们做那个项目时，有一个组件卡在这里，所以我们忘记计算高度。
结果，它变成了垂直方向和装饰性的。
另一点需要注意的是，当子元素具有不同的高度时，例如将图像包装为文本，它们仍然使用align-items: center，它们单独居中且不会相互接触。
很多人都没有注意到这一点，说实话，这是一个陷阱。
还有另一个重要的细节。
当多个子节垂直排列时，flex方向应设置为column。
去年手机版改版的时候，有人直接用了align-items:center，结果子项就横向放置了。
后来我发现有问题，就用柱子来解决。
等等，还有别的事。
如果容器的宽度不够大， justify-content: center 会强制压缩子元素。
在这种情况下，应添加额外的 minWidth:1 00%。

我认为值得尝试的一件事是使用 flex-grow:1 自动填充子元素的容器。
我们去年更新收件箱的时候就添加了这个功能，极大的提升了用户体验。
但要注意最坏的情况：当子元素太多时，例如很长的文本，默认情况下会换行。
在这种情况下，可能需要压接、卷边和折叠来控制间隙。

总之，Flex布局是灵活的，但是在组合参数时，应该将它们作为构建块一一进行测试。

CSS 实现元素水平垂直居中的 N 种方式

对内联元素使用文本对齐，对块级宽度和高度使用自动 margin:0，对可选元素使用变换或弯曲。
固定宽度和高度的左右块使用margin，顶部和底部块使用top:5 0%+margin-top(-height/2 )。
如果块级别的宽度和高度不固定，则左侧和右侧使用transform，顶部和底部使用flex或fit-content。
对于垂直居中，行内使用 line-height，块级别使用 top:5 0%+margin-top(-height/2 )。
多行文本以网格或书写模式排列。

CSS3如何实现元素水平居中、垂直居中

上周，我在做网页布局的时候，遇到了一个问题。
如何使宽度可变的块元素在页面上水平和垂直居中？我缺少 CSS3 中的一些方法。

水平集中。
如果它是宽度可变的块元素，我可以用表格标签将其包裹起来，并将表格的边距设置为自动，以实现水平居中。
我记得这个方法在2 02 3 年的一个项目中使用过，效果不错。

垂直居中，如果设置了父元素的高度，单行文字就简单了。
只需将父元素的 line-height 设置为与高度一样高即可。
对于多行文本，我尝试使用表格单元格的vertical-align属性，Chrome、Firefox和IE8 及以上浏览器都支持该属性。

不过，我刚才想到的另一件事是，如果父元素的高度不确定，你可能需要使用flex布局或者grid布局。
这两种布局方式在现代前端开发中使用得越来越多。
您可以决定哪种方法适合您的需求。