最初，我遵循本文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
当我在我的代码上尝试它时，它终于起作用了：
有什么好的解释吗？
你错过display: block;了.valign。看起来应该将transform元素应用于block元素，而不是内联。这里是文档：
可转换元素是以下类别之一的元素：
- 一个元素，其布局由CSS框模型控制，该CSS框模型可以是块级或原子内联级元素，或者其display属性可以计算为table-row，table-row-group，table-header-group，table-footer -group，表单元格或表标题
- SVG名称空间中的一个元素，不受CSS盒模型的控制，该CSS盒模型的属性为transform，'patternTransform'或gradientTransform。
另外，如果您只需要居中放置垂直（而不是居中放置），则将其更改transform为：
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句