CSS实现图片与多行文字水平垂直居中技巧

本文主要探讨了如何实现大小不固定的图片和多行文字的水平垂直居中显示，提供了比传统方法更简洁、易懂且兼容性更强的解决方案。 在CSS布局中，垂直居中是一个常见的需求，但对于行数不固定的文字和大小不固定的图片，实现起来相对复杂。传统的垂直居中方法，如使用`line-height`对于单行文字有效，但并不适用于多行文字。文章指出，淘宝团队提出的一种利用`font-size`解决IE下垂直居中的方法虽然有一定的效果，但存在诸如不支持img外标签浮动、需要记忆比例参数、兼容性问题等缺点。 文章提出两种新的方法： 1. **inline-block裸标签对齐法**：将文字或图片的`display`属性设置为`inline-block`，并利用`vertical-align: middle`来实现垂直居中。这种方法的好处在于不需要额外的标签，且对多行文字同样有效。代码示例如下： ```css div { display: table-cell; width: 550px; height: 1.14em; padding: 0 0.1em; border: 4px solid #beceeb; color: #069; font-size: 10em; vertical-align: middle; } span { display: inline-block; font-size: 0.1em; vertical-align: middle; } ``` 2. **透明图片拉伸对齐法**：利用一个透明的占位符图片，通过调整图片的大小来实现元素的垂直居中。这种方法适用于图片的垂直居中，但可能不适用于文字。 这两种方法都强调了代码的简洁性和兼容性，可以有效地解决不同浏览器的适配问题，尤其适用于多行文字的垂直居中显示。 在实际应用中，开发者可以根据具体需求和浏览器兼容性要求选择适合的方法。随着CSS技术的发展，如Flexbox和Grid布局的出现，垂直居中问题有了更多的解决方案，但在某些场景下，这些经典方法依然具有很高的实用性。因此，了解和掌握这些方法对于提升CSS布局能力是非常重要的。