使用Flexbox居中元素：为何给.footer-background设display:flex才生效？

为什么给.footer-background设置display: flex可以居中.copyright-text #

你的DOM层级从外到内是.footer-background → .footer.container → .copyright-text，当你给最外层的.footer-background开启flex布局后，它的直接子元素.footer.container就会成为flex子项：

• align-items: center 会让子项在垂直方向上，处于.footer-background50px固定高度的中间位置
• justify-content: center 会让子项在水平方向上居中
  同时你给.container设置的margin: 0 auto本身也会让容器在宽度小于1200px时水平居中，两层居中效果叠加后，内部的版权文本自然就整体居中了。

给.footer设置display: flex无法实现居中的原因 #

flex布局的作用范围仅限于当前元素的直接子元素，且居中效果需要父元素有足够的可分配空间才能生效：

1. 如果你只给.footer开flex，它只能控制内部的.copyright-text在自己的盒子范围内居中，但它的父元素.footer-background还是默认的块级元素，块级元素默认不会给内部子元素提供垂直居中的能力，.footer会默认顶在.footer-background的顶部，就算内部文本在.footer里居中了，.footer本身都没在蓝色背景里垂直居中，视觉上自然达不到预期。
2. 默认状态下.footer的高度是由内部文本撑开的，和文本高度几乎一致，就算开了align-items: center也没有多余的垂直空间让元素居中，看不出效果。

如果你确实想通过给.footer设置flex实现效果，可以额外加两个配置：

• 给.footer设置height: 100%，让它的高度和外层的.footer-background保持一致
• 给.footer加上align-items: center和justify-content: center，就能实现一样的居中效果

内容的提问来源于stack exchange，提问作者getdadub