这是行不通的，因为它vertical- align设置了行内内容相对于其行框而不是其包含块的对齐方式：
此属性影响由inline-level元素生成的框的线框内的垂直位置。
一个线框内为
包含形成直线的框的矩形区域
当您看到包含多行的某些文本时，每个文本都是一个行框。对于
例如，如果您有
p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>如果只有一行，就像您的情况一样，它也是一个行框
在该线 框内垂直使用vertical-align: middle中心。但是问题在于，线盒未 在包含块内垂直居中。.content
