未知高度的图片垂直居中
在前端开发中，让一张高度未知的图片在容器里完美垂直居中，听起来简单，实际操作起来却经常让人抓狂——传统的`line-height`或固定`padding`方法都因高度不确定而失效。这篇文章就精准地切中了这个经典痛点，并提供了一个极其简洁优雅的CSS解决方案。 作者的核心思路是利用`inline-block`和`vertical-align`这两个基础属性的组合。关键在于，为图片和容器设置相同的`line-height`值，同时将图片的`display`属性设为`inline-block`。这样，图片的行内框就能利用行高进行对齐，而`vertical-align: middle`则确保了垂直方向的居中。整个方案无需JavaScript介入，代码量极少，兼容性也覆盖了主流浏览器。 其巧妙之处在于将图片视作一个行内元素，利用文本排版的规则来解决布局问题，化繁为简。实际效果是，无论图片高度如何变化，都能在父容器中始终保持垂直居中。对于需要快速实现响应式图片居中的场景，这是一个非常实用且无侵入性的技巧。