CSS如何将元素定位在半高（垂直50％）

Question

我期待构建一个位于元素旁边的工具提示。将它放在元素的中心很容易。但有没有办法垂直地这样做（在元素的右侧或左侧垂直放置在元素高度的中间）？

出于我的目的，元素的高度是已知的＆amp;工具提示的高度不是。工具提示可以是元素的子元素。

但是，当两个高度都未知时，我也很好奇如何做到这一点。通过高度我理解元素和工具提示的高度。宽度可以知道并修复。

Answer 1

这已经很晚了但是我试着在codepen上做一个例子，如果我正确地理解了你的问题，它会显示一个工作示例。

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

使用CSS转换。

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

希望这有帮助！

Answer 2

使用CSS＆amp;的jQuery -

CSS

.div{
    top:50%
}

的jQuery

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

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。

Answer 4

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