什么是 Flexbox？
Flexbox 是 CSS3 中的布局模块，它为开发者提供了一种强大、灵活和响应式的页面布局方法。与传统的布局方法相比，Flexbox 更加简单易用，并且可以非常容易地解决很多布局问题。
Flexbox 可以同时处理一维和二维布局，可以实现弹性盒子内部的对齐、间距和排序等操作。通过设置元素的 display 属性为 flex 或 inline-flex，就可以将它们转化为弹性盒子，然后可以对弹性盒子里的子元素进行布局。
如何实现图片上下居中？
当我们想要将图片放在一个容器内并使它们上下居中时，Flexbox 显然是一个非常好的解决方案。通过设置容器的 display 属性为 flex，然后设置容器和图片的 align-items 和 justify-content 属性即可轻松实现。
-- -------------------- ---- ------- ---- ------------------ ---- --------------- ------------ ------ ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - --- - ---------- ----- ------- ----- - --------
以上代码将实现以下效果：
容器的 display 属性被设置为 flex，这使得容器内部的子元素都成为了 flex 元素。同时，容器的 align-items 和 justify-content 属性被设置为 center，这表示将子元素纵向和横向都居中对齐。
对于图片本身，我们将它的 max-width 属性设置为 100%，这可以确保图片按照容器的宽度进行缩放，同时它的 height 属性被设置为 auto，这意味着它的高度会按照宽度的比例自适应计算。
实践意义
使用 Flexbox 实现图片上下居中的方案不仅仅是一种布局技巧，更是一种使用现代 CSS 布局模块的良好实践。Flexbox 不仅功能强大，而且可以简化代码和减少维护成本，同时还能提高响应速度和用户体验。
现在越来越多的前端开发者开始使用 Flexbox 进行页面布局，不仅仅是因为它是最先进的 CSS 技术之一，而且还因为它可以提供高可维护性、高可扩展性和高性能的页面布局方案。
总结
本文介绍了使用 CSS Flexbox 实现图片上下居中的情况，并且给出了相应的示例代码和实践意义。希望本文能够帮助读者理解 Flexbox 的基本概念、用法和意义，并且能够在实际开发中灵活使用 Flexbox 进行页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64896c5448841e98947b5295