CSS如何定位在半高度元件（垂直50％）(CSS how to position element i

我期待着建立其旁边的元件定位工具提示。 人们很容易把它的上方和下方的单元的中心。 但有一种方法来这样做垂直（上元件的右侧或左侧竖直地定位在元件高度的中间）？

对于我的目的，元素的高度被称为＆提示的高度是没有的。 并提示可以的子元素。

但是，我也好奇怎么做时，双方高度是未知的。 通过高度我理解元素和工具提示的高度。 宽度可以是已知的并固定。

Answer 1:

这是很迟，但我试图让表示加工例如，如果我理解正确你的问题上codepen一个例子。

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

使用CSS变换。

例如， transform:translateX(-50%); ，将移动通过自身的50％左的元件。 现在，您可以将其调整到与父position和bottom或top或left或right ，然后通过自身的尺寸移动它。

希望这可以帮助！

Answer 2:

使用CSS和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提示来content.You的高度可以看到我是如何做到的是，这里的jsfiddle

文章来源: CSS how to position element in half height (vertical 50%)