將 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;

請幫忙，不能讓它工作，有什么想法嗎？

這是外部和內部div的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';

Answer 2

window.onload = checkAvailableHeight;

window.onresize = checkAvailableHeight;

function checkAvailableHeight(){
    var yourDiv = document.getElementById("yourDiv");
    yourDiv.style.marginTop = ((window.innerHeight - yourDivHeight) / 2) + "px";
}