vertical-align用于调整行内元素在行盒内的垂直位置，仅对inline、inline-block或table-cell元素有效，常用于图片与文字的垂直对齐；若在块级元素上失效，需检查display属性。实现图片文字居中常用vertical-align: middle，配合line-height可优化效果；而块级元素的垂直居中应选用Flexbox（align-items: center）、Grid（place-items: center）或绝对定位+transform等方法。
vertical-align这个CSS属性，说白了，它就是用来调整行内元素（inline-level elements）在行盒（line box）内部的垂直位置的。它不是用来对齐块级元素的，这是很多人初学时最容易踩的坑。当你需要让一行文字中的图标、图片或者不同大小的文字在垂直方向上看起来更协调时，
vertical-align就派上用场了。
解决方案
要使用
vertical-align，首先要明确它的作用对象。它只能应用于
inline、
inline-block或
table-cell这些显示类型的元素。如果你试图把它用在一个普通的
div（默认是
block）上，你会发现它根本不工作，这可不是什么bug，而是它的设计初衷。
它的值有很多，我们来聊聊几个常用的：
-
baseline
(默认值): 这是基线对齐。文字的基线会和父元素的基线对齐。如果你没有设置任何值，元素默认就是这个。这常常导致图片底部和文字底部对齐，图片下方留有空白，很多人会觉得奇怪。 -
top
: 元素的顶部会与行盒的顶部对齐。 -
middle
: 元素的中心会与父元素的基线加上x-height（小写字母x的高度）的一半对齐。这听起来有点抽象，但实践中，它通常能让图片或图标与文字看起来“居中”一些。 -
bottom
: 元素的底部会与行盒的底部对齐。 -
text-top
: 元素的顶部与父元素内容区域的顶部对齐。 -
text-bottom
: 元素的底部与父元素内容区域的底部对齐。 -
sub
/super
: 让元素变成下标或上标，就像数学公式里那样。 -
length
(比如5px
): 元素基线相对于父元素基线的偏移量。正值向上移，负值向下移。 -
%
(比如50%
): 元素基线相对于父元素line-height
的百分比偏移。
实际应用中，你可能会这样用：
立即学习“前端免费学习笔记（深入）”；
这是一段文字，里面有一个 @@##@@ 小图标。
或者，如果你想在表格单元格里垂直居中内容：
td {
vertical-align: middle;
}记住，
vertical-align是作用在自身上的，但它会影响它在行盒中的位置。理解这一点，很多问题就迎刃而解了。
为什么我的vertical-align
不生效？常见误区与排查方法
这问题我听过太多次了，几乎每个前端新手都会问。最核心的原因，我敢打赌，八成是你把它用在了不该用的地方。
第一个也是最常见的误区：用在块级元素上。
vertical-align只对
display属性为
inline、
inline-block或
table-cell的元素有效。一个普通的
div、
p、
h1等默认都是
block级元素，它们会独占一行，
vertical-align对它们是完全无效的。我记得我刚开始学CSS的时候，就对着一个
div使劲加
vertical-align: middle;，结果页面纹丝不动，当时真是百思不得其解，后来才明白是基本概念就错了。
排查方法：
-
检查
display
属性： 打开浏览器的开发者工具（F12），选中你想要对齐的元素，查看它的display
属性。如果不是inline
、inline-block
或table-cell
，那它自然不会生效。你需要先将元素的display
属性修改为上述类型之一。 -
理解行盒（Line Box）：
vertical-align
是作用在行盒内部的。如果你的元素是单独一行，或者它所在的行盒只有一个元素，那么它的垂直对齐可能就不那么明显，或者需要配合line-height
来观察效果。例如，一个inline-block
元素，如果它所在的父元素line-height
很高，那么vertical-align: middle
会让它在那个大行高中居中。 -
父元素的影响：
vertical-align
是相对于父元素的基线来计算的。如果父元素的line-height
设置不合理，或者父元素内部没有文本内容，也可能会影响vertical-align
的视觉效果。特别是当父元素没有文本，只有一个inline-block
子元素时，它的基线可能会“塌陷”或变得不确定。
如果你想对齐块级元素，或者让一个元素在其父容器中垂直居中，你大概率需要换个思路，比如用Flexbox、Grid或者绝对定位+
transform。
vertical-align不是万能药，它有自己明确的应用场景。
vertical-align: middle
如何实现图片与文字的完美居中对齐？
vertical-align: middle在图片和文字混合排版时，确实是个非常实用的属性。它能让图片或图标的中心线与文本的基线加上小写字母x高度的一半对齐。这通常能带来一个相对“居中”的视觉效果。
然而，"完美居中"这个词，在前端里有时是个陷阱。因为字体、行高、图片本身的尺寸都可能影响最终的视觉效果，所以“完美”往往是相对的。
实现思路：
-
图片和文字都应是行内元素： 确保你的图片（
@@##@@
默认就是inline
）和文字都在同一个行盒内。 -
对图片应用
vertical-align: middle;
： 这是最直接的做法。
可能遇到的问题和调整：
-
图片下方有空白： 这是
img
元素默认是inline
，其vertical-align
默认是baseline
导致的。baseline
对齐时，图片下方会留出空间给下划线或下沉的字母（如g, p, y）。使用vertical-align: middle;
或者更激进的vertical-align: bottom;
，甚至直接设置display: block;
（但这样会破坏行内布局），都可以解决。 -
视觉上的不完美： 即使使用了
middle
，由于不同字体、不同字号的x-height差异，或者图片本身的视觉重心不在几何中心，你可能会觉得图片看起来还是有点偏上或偏下。这时，你可以尝试使用vertical-align
的length
值进行微调，比如vertical-align: -2px;
，手动向下移动一点，直到你觉得满意为止。这就像设计师在像素级别上的微调，有时候纯粹的CSS规则并不能完全满足人眼的审美。
记住，
vertical-align: middle只是一个起点，它提供了一个合理的默认居中方案，但最终的“完美”往往需要你根据具体情况进行细致的观察和调整。
除了vertical-align
，还有哪些CSS方法可以实现垂直居中？
虽然
vertical-align在行内元素和表格单元格中表现出色，但它在块级元素的垂直居中方面就显得力不从心了。幸运的是，CSS提供了多种强大的工具来应对更复杂的垂直居中需求。
-
Flexbox (弹性盒子布局)： 这是现代Web开发中最常用、最灵活的居中方案。如果你需要在一个容器内居中一个或多个子元素，Flexbox几乎是首选。
-
父容器：
display: flex;
-
垂直居中单行/多行内容：
align-items: center;
(主轴是行时，align-items
控制交叉轴，即垂直方向) -
水平居中：
justify-content: center;
-
单个子元素在父元素中居中： 如果子元素是唯一的，父元素设置
display: flex; justify-content: center; align-items: center;
即可。 -
特定子元素居中： 对该子元素设置
align-self: center;
。
.container-flex { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 200px; /* 容器需要有高度 */ border: 1px solid #ccc; } .item-flex { width: 100px; height: 50px; background-color: lightblue; } -
父容器：
-
Grid (网格布局)： Grid布局在处理二维布局时非常强大，垂直居中对它来说也是小菜一碟。
-
父容器：
display: grid;
-
垂直居中：
align-items: center;
-
水平居中：
justify-items: center;
- 如果你只有一个子元素，并且想让它完全居中在网格单元格内，可以直接对父容器设置
place-items: center;
(这是align-items
和justify-items
的简写)。
.container-grid { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ height: 200px; border: 1px solid #ccc; } .item-grid { width: 100px; height: 50px; background-color: lightcoral; } -
父容器：
-
绝对定位 +
transform
： 这是一个经典的居中技巧，适用于需要精确控制元素位置，并且不影响周围流式布局的情况。-
父容器：
position: relative;
(提供定位上下文) -
子元素：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
top: 50%;
和left: 50%;
会将元素的左上角移动到父容器的中心点，而transform: translate(-50%, -50%);
则会根据元素自身的宽度和高度，将其自身向左和向上各移动其自身尺寸的一半，从而实现精确居中。
.container-absolute { position: relative; height: 200px; border: 1px solid #ccc; } .item-absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 核心 */ width: 100px; height: 50px; background-color: lightgreen; } -
父容器：
-
display: table-cell
： 这个方法利用了表格单元格的特性，它能像表格一样处理内容对齐。-
父容器：
display: table;
(或者display: table-row;
) -
子元素：
display: table-cell; vertical-align: middle; text-align: center;
(如果还需要水平居中) 这个方法虽然能实现，但由于语义化和布局灵活性不如Flexbox和Grid，现在已经较少用于纯粹的布局目的，除非你确实在处理表格数据。
-
父容器：
选择哪种方法取决于你的具体需求、浏览器兼容性要求以及你对布局的整体考量。Flexbox和Grid是现代布局的首选，它们提供了更强大的控制力和更好的可维护性。而绝对定位+
transform在某些特定场景下依然非常有用。
