Centrer un div verticalement

Question

Je dois centrer un div verticalement, avec seulement une marge au-dessus et au-dessous.

Donc je l'ai fait générer la marge avec JavaScript, comme ceci.

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; 

Aidez-nous, ne pouvez pas le mettre au travail, des idées?

Voici le CSS div interne et externe:

#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

Ceci est parce que le parent de votre élément ne dispose pas d'une hauteur définie elle-même.

---

En ce qui concerne votre JavaScript, un problème est cette ligne, ce qui n'a pas de sens du tout et doit être supprimé:

xMargin = (xMargin()); 

Vous devez également ajouter « px » aux valeurs que vous configurez , et de mettre des guillemets autour de l'ID, comme ceci:

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"; 
}