Table Cell won't align vertically and horizontally

Question

Good morning everyone!

I was hoping if any you masters would be able to assist - I have a div on a site I am building which has been applied with a CSS of "height: 100%" and been given the "display: table" property. There is another div within this div with a "display: table-cell" and a "vertical-align: middle". However, this code is not centering vertically? Additionally, I have a "margin-left: auto" and a "margin-right: auto" applied yet it does not center horizontally either as it should - any thoughts?

I have 4 animations on the page but the one I am working on right now will only display for mobile phones, so you will either need to use this ( http://mobiletest.me/#d=iPhone_5_portrait&u=http:// energyamplified.co.za/home.php) or make sure your view port when visiting (http:// energyamplified.co.za/home.php) is within 227-449 pixels wide.

The CSS:

#animation_wrapper {
height: 100%;
display: table;
}
@media only screen and (min-width: 227px) and (max-width: 449px) { /* Very Small Animation */
div #frameContainer_very_small {
display: table-cell;
vertical-align: middle;
padding-top: 25%;
margin-left: auto;
margin-right: auto;
}
div #frameContainer_very_small iframe {
width: 100%;
height: 100%;
display: block;
}
}

The HTML/JS (which in this viewport, the css elsewhere on the site loads the iframe "animation_very_small.html":

<div id="animation_wrapper">                   
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"

var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"

var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>"

var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>"

}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>

Your time and assistance would be greatly appreciated.

Kind regards,

Byron

Answer 1

Okay, one of the other divs was causing an issue and after I added the height as suggested, it is working now. Thank you for your direction Mr Lister - feel free to add this as an answer if you want me to mark it for you.