CSS如何将一个元素定位在另一个元素的中间（半高度/垂直50%）

Question

我希望构建一个工具提示，它位于元素旁边但在元素的中心位置。将其放置在元素的水平中心上方或下方并进行定位很容易。但是有没有一种方法可以在元素的右侧或左侧垂直居中位置上设置工具提示（垂直居中元素高度）？

对于我的目的，元素的高度是固定的（已知），而工具提示的高度不是，因为它可以包含各种文本内容。并且工具提示可以是元素的子元素。

然而，如果两者高度都不是固定的（高度未知且可能因内容而异），我也很好奇如何实现。所说的高度指的是元素和工具提示的高度。宽度可以是已知和固定的。

- elon

---

你得到答案了吗？ - ggdx

不好意思，以下两个都不适合我。 - elon

请看下面我的回答：https://dev59.com/PmUp5IYBdhLWcg3w669C#32250727 - Anthony Graglia

@elon 如果下面的答案回答了问题，请将其标记为已回答，以帮助其他用户。谢谢。 - Anthony Graglia

@trgraglia，我对这个问题进行了更精确的描述。 - elon

@埃隆，我在引用的Codepen中添加了更多的示例。 - Anthony Graglia

Answer 1

这可能有点晚了，但是我在 codepen 上尝试创建了一个示例，如果我正确理解了您的问题，它将显示一个工作示例。

http://codepen.io/trgraglia/pen/RWbKyj

使用 CSS transform。

例如，transform:translateX(-50%);，会将元素左移 50% 的自身宽度。现在，您可以使用 position 和 bottom 或 top 或 left 或 right 将其与父元素对齐，然后移动自身的尺寸。

希望这可以帮助到您！

- Anthony Graglia

---

不确定该负评来自哪里。也许我的例子没有表述清楚。例如，Top使用父元素的高度。您可以在工具提示上设置50%的顶部，然后translateY-50％使其居中。请随意解释负评。 - Anthony Graglia

这个 transform 属性非常棒！在现代浏览器中，对于这个 CSS 标签的支持相当不错。但是如果你要使用它，请检查一下你的浏览器是否支持（老旧的 IE 不行...老生常谈了）。 - Randy

对我来说，这是最好的解决方案。 - Khateeb321

请帮我把这个 Stack Overflow 的问题链接放到你的笔记中，这样我就可以从你的笔记中找到这个问题了。谢谢。 - Raymond Naseef

@RaymondNaseef 好的，已完成。感谢您的建议。 - Anthony Graglia

Answer 2

using CSS & jQuery-

CSS

.div{
    top:50%
}

jQuery

var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');

- ggdx

---

这个问题涉及纯CSS的解决方案。 - elon

Answer 3

如果您不知道两个高度，只有两种方法：

1. 将父元素设置为display: table，并将子元素设置为display: table-cell和vertical-align: middle。
2. 使用CSS3 Flexbox：http://www.w3.org/TR/css3-flexbox/，但浏览器支持有限：http://caniuse.com/#search=flexbox

如果您对此主题感兴趣，请参阅以下带有更多提示的良好文章： http://www.vanseodesign.com/css/vertical-centering/ 如您所见，唯一在不知道元素高度且不使用CSS3的情况下垂直对齐元素的方法是使用display: table-cell。

- Aljullu

Answer 4

如果您知道内容的高度，最简单的方法是将工具提示的line-height设置为内容的高度来居中。您可以在这里看到我是如何做到的jsFiddle。

- dinodsaurus