CSS如何将元素定位在半高(垂直50%)

Question

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

为了我的目的,元素的高度是已知的,工具提示的高度不是.工具提示可以是元素的子元素.

但是,当两个高度都未知时,我也很好奇如何做到这一点.通过高度我理解元素和工具提示的高度.宽度可以是已知的并且是固定的.

Answer 1

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

使用CSS转换.

例如,transform:translateX(-50%);将移动元素剩余50%的ITSELF.现在,您可以使用position和bottom或top或left或将其与父对齐right,然后按其自身的尺寸移动它.

希望这可以帮助!

这个变换属性太棒了！在现代浏览器中，对这个 CSS 标签的支持非常好，如果你打算使用它，请检查你的浏览器支持（旧的 IE 不起作用......老故事） (2认同)
对我来说，这是最好的解决方案。 (2认同)
请帮我一个忙，并将此问题的链接放入您的笔中，以便我可以从书签到您的笔中找到该问题。谢谢。 (2认同)

Answer 2

使用 CSS 和 jQuery-

CSS

.div{
    top:50%
}

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