将 CSS 位置从百分比转换为像素

Question

我有一个垂直居中的标题，如下所示：

h1{
  position: absolute;
  height: 30px;
  top: 50%;
  margin-top: -15px;
}

现在我想使用jQuery将当前位置转换为像素。但如果我试试这个：

$('h1').css('top', $('h1').offset().top.toString() + "px")

标题上移了一点。我在这里错过了什么？

Answer 1

jQuery offset top 将负边距考虑在内。不仅仅是看最高值。

您可以执行以下操作：

var margin = parseInt($('h1').css("margin-top")) * -1, //positive val of margin
    offset = margin + $('h1').offset().top;

$('h1').css({
    top: offset + "px"
});

将 CSS 位置从百分比转换为像素

Convert CSS positioning from percentage to pixels

javascript

jquery

pixels

percentage