最初我关注了这篇文章，它在子元素上使用了position: relative：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
http://codepen.io/anon/pen/KpWKWg
但我一辈子都无法让它在我的代码上工作：
然后我发现这些指令在子元素上使用position: absolute：https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown
http://codepen.io/chriscoyier/pen/lpema
当我在我的代码上尝试它时，它终于奏效了：
有什么好的解释吗？
【问题讨论】：
标签： html css css-position vertical-alignment
您在.valign 上错过了display: block;。看起来应该将变换元素应用于块元素，而不是内联。这是文档：
CSS Transforms Module Level 1 - Terminology - Transformable Element
可变形元素是属于以下类别之一的元素：
- 一个元素，其布局由 CSS 框模型控制，该模型是 block-level 或 atomic inline-level element，或者其 display property 计算为 table-row、table-row-group、table-header-group、table -footer-group、table-cell 或 table-caption
- SVG 命名空间中的一个元素，不受具有属性 transform、“patternTransform”或 gradientTransform 的 CSS 框模型的约束。
此外，如果您只需要垂直居中（而不是水平居中），请将transforms 更改为：
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
【讨论】：
.parent{display:block} .child{position:relative} 但是当我在我的代码中尝试相同的结构时它不起作用。最终在我的代码中起作用的是.parent{display:block} .child{position:absolute}。 translate 和 translatey 属性在此示例中是同义词。
p 元素中，该元素已经包含display: block;
.element { position: relative; top: 50%; transform: translateY(-50%); }
默认情况下，DOM 上的所有元素都是position:static。像top, left, right, bottom 这样的属性不能用于静态定位的元素。使用任何其他定位上下文（例如 relative absolute 或 fixed）允许您使用这些值。
解决方案中使用的方法是将元素从顶部推入50%，然后将其向上拉出元素的一半height。这就是transform 发挥作用的地方。
现在，您可以看到您的两篇文章都使用了不同于static 的定位上下文。首先，它使用“相对”，在 css-tricks 示例中，您会看到 absolute。
您的代码无法正常工作的原因是transform 适用于块级元素，但您的文本位于span 内。给它添加一个display:block，你应该很高兴。
我还注意到你有 transform: translate(-50%,-50%); 应该只是 translateY(-50%) 来补偿你试图垂直居中的任何盒子的高度，方法是从 top 推到 50%。
【讨论】：
display: block：jsfiddle.net/ge77ma0e/2