Vertical Align Browser Bug

by Kyle Mitofsky

HTML

<div id="container">
    <div id="child">Child</div>
</div>


















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/22719315/1366033'>Vertical align glyphicon in bootstrap 3</a><br/>
<div>

CSS

#container {
    position: relative;
}

#child {
    position: relative;
    height: 100px;
    top: 50%;
}


/* Just for Visual Effects */
body { 
  background: white;
}
#container {  
  border: 1px solid grey;
}
#child {  
  border: 1px solid orange;
  width: 100px;
  margin: 0px auto;
}

JavaScript

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},1000);