Question

我知道很多技术可以垂直居中，但我根据自己的想法制作了这个技巧。我相信这个概念是正确的，但我没有得到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高度的一半，如果我将其作为边距顶部，我应该能够使其垂直居中。我对吗？如果没有，有人可以向我解释一下吗？

检查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

Answer 2

使用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/

Answer 3

你没有考虑div2上的填充，如果你得到outerHeight，你应该有更多的快乐：http://jsfiddle.net/CPrtZ/1/

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

Answer 4

我意识到这个问题是关于如何使用jQuery垂直居中div，但从这个问题的评论来看，似乎错误地认为仅使用CSS无法做到这一点。这是 jsFiddle ，表明可以完成。 It works in all current browsers and IE8+

<强> HTML

<div class="div1">
    <div class="div2">vertically aligned while
        <br />height is not fixed but
        <br />based on content height</div>
</div>

<强> CSS

body {
    display: table;
    width: 100%;
}
.div1 {
    height:200px;
    background-color: red;
    position:relative;
    display: table-cell;
    vertical-align: middle;
}
.div2 {
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
}

使用jquery垂直居中div

4 个答案: