Question

最初我跟着这篇文章在子元素上使用了position: relative：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

http://codepen.io/anon/pen/KpWKWg

但我无法让它为我的生活编写代码：

http://jsfiddle.net/ge77ma0e/

然后我发现这些说明在子元素上使用position: absolute：https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown

http://codepen.io/chriscoyier/pen/lpema

当我在我的代码上尝试它时，它终于奏效了：

http://jsfiddle.net/y2ajtmks/

有什么好的解释吗？

Answer 1

您错过了display: block;上的.valign。似乎应该将变换元素应用于块元素，而不是内联。这是文档：

CSS Transforms Module Level 1 - Terminology - Transformable Element

可转换元素是以下类别之一的元素：


一个元素，其布局由CSS框模型控制，该模型是block-level或atomic inline-level element，或其display property计算到表行，表行组，表-header-group，table-footer-group，table-cell或table-caption

SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform。

此外，如果您只需要居中（而不是水平），请将transform更改为：

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Answer 2

默认情况下，DOM上的所有元素都是position:static。像top, left, right, bottom这样的属性不适用于静态定位元素。使用relative absolute或fixed等任何其他定位环境都可以使用这些值。

解决方案中使用的方法是将元素从顶部推出50%，然后将元素的height向上拉一半。这是transform发挥作用的地方。

现在，您可以看到两篇文章都使用static以外的其他定位上下文。首先，它使用'relative'，在css-tricks示例中，您会看到absolute。

您的代码无效的原因，因为transform适用于块级元素，但您的文本位于span内。添加一个display:block就可以了，你应该好好去。

我还注意到你有transform: translate(-50%,-50%); translateY(-50%)来补偿你试图垂直居中的任何一个盒子的高度，方法是将它从top推到{{1} }}

何时在与css垂直对齐时使用位置绝对值与位置相对

2 个答案: