使用jQuery垂直居中div

debugcn 发表于 Dev

太阳

我知道有很多技巧可以使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>

我计算了外部div高度，然后将其除以2来计算中心。
计算应该居中的div中心，这是 div2
现在，我将结果的一半减为一半的div2高度div1，如果我将其作为边距顶部，则应该能够使其垂直居中。我对吗？如果不能，有人可以向我解释吗？

检查小提琴

詹姆斯·科伊尔

使用outerHeight忽略填充。

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

http://jsfiddle.net/DZxW2/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。