javascript - 垂直居中一个div

Question

我必须将一个 div 垂直居中，上下只有边距。

所以我用 JavaScript 让它生成边距，就像这样。

var xLength = ((document.getElementById("outerdiv").offsetHeight)+"px");

xLength = (xLength - 222); //222 is the Length of the to be centered div

xMargin = (xLength / 2); //because of the 2 margins
xMargin = (xMargin());

document.getElementById(innerdiv).style.marginTop = xMargin;
document.getElementById(innerdiv).style.marginBottom = xMargin;

请帮忙，不能让它工作，有什么想法吗？

这是外层和内层的CSS:

#outerdiv {   
    min-height:302px;
    width:58px;
    margin-left:640px;
    z-index:2;
    float:right;
    margin-right:228px;
    border: 1px solid black;
    position:absolute;
}

#innerdiv {
    height:222px;
    width:58px;
    position:absolute;
    border: 1px solid green;
}

HTML:

<div id='outerdiv'>
  <div id='innerdiv'>
  </div>
</div>

Answer 1

这是因为您的元素的父元素本身没有定义高度。

---

关于您的 JavaScript，一个问题是这一行，它完全没有意义，应该被删除:

xMargin = (xMargin());

您还应该将“px”添加到您设置的值中，并在 ID 周围加上引号，如下所示:

document.getElementById('innerdiv').style.marginTop = xMargin + 'px';
document.getElementById('innerdiv').style.marginBottom = xMargin + 'px';