jquery - 使用jquery垂直居中div

Question

我知道很多让 div 垂直居中的技巧，但我是按照自己的想法做的。我相信这个概念是正确的，但我没有得到 100% 的结果。

这是javascript

jQuery(document).ready(function(){
  var l=jQuery('.div1').height();
  var level=l/2;
  var bt=jQuery('.div2').height()/2;
  var val=level-bt;
  jQuery('.div2').css("margin-top",val);
});

CSS

.div1
{
  height:50px;
  background-color: red;
  position:relative;    
}
.div2
{
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
    position: absolute;
    right:5%;
    top:0%

}

HTML

<div class="div1"><div class="div2">vertical</div>

1. 我计算了外部 div 的高度，并通过将其除以 2 来计算中心。
2. 计算应该居中的div中心，这里是div2
3. 现在我将 div2 高度的一半减为 div1 高度的一半，如果我将其作为 margin-top，我应该能够让它垂直居中。我对吗？如果不能，有人可以向我解释一下吗？

检查 fiddle

Answer 1

试试这个，你缺少减去填充

jQuery(document).ready(function(){
    var l=jQuery('.div1').height();
    var level=l/2;
    var bt=jQuery('.div2').height()/2;

    var val=level-bt-parseInt(jQuery('.div2').css('padding-top'));
    jQuery('.div2').css("margin-top",val);
});

Demo