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

Posted 2023-03-05

【中文标题】与 css 垂直对齐时，何时使用绝对位置与相对位置

【英文标题】：When to use position absolute vs position relative when vertically aligning with css

【发布时间】：2015-08-15 17:09:27

【问题描述】：

最初我关注了这篇文章，它在子元素上使用了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/

有什么好的解释吗？

【参考方案1】：

您在.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%);

【讨论】：

在第一篇文章中它是.parentdisplay:block .childposition:relative 但是当我在我的代码中尝试相同的结构时它不起作用。最终在我的代码中起作用的是.parentdisplay:block .childposition:absolute。 translate 和 translatey 属性在此示例中是同义词。

@user27068, 文本位于p 元素中，该元素已经包含display: block;

啊哈，现在说得通了。我被说明代码的文章误导了.element position: relative; top: 50%; transform: translateY(-50%);

这救了我的命，但是当多个元素彼此相邻时你会怎么做？我的意思是一个包含多个锚标签的 div，

【参考方案2】：

默认情况下，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