表格單元格無法垂直和水平對齊

Question

大家，早安！

我希望您的主人能為您提供幫助-我正在構建的網站上有一個div，該div已應用“高度：100％”的CSS並具有“顯示：表格”屬性。 此div中還有一個div，其中包含“ display：table-cell”和“ vertical-align：middle”。 但是，此代碼不是垂直居中嗎？ 另外，我有一個“ margin-left：auto”和一個“ margin-right：auto”，但是它也沒有水平居中-有什么想法嗎？

我在頁面上有4個動畫，但是我現在正在使用的動畫將僅在手機上顯示，因此您將需要使用該動畫（ http://mobiletest.me/#d=iPhone_5_portrait&u=http:// energyamplified （.co.za / home.php）或訪問時確保您的視口（http：// energyamplified.co.za/home.php）在227-449像素寬之間。

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

HTML / JS（在此視口中，網站其他位置的CSS會加載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>

您的時間和協助將不勝感激。

親切的問候，

拜倫

Answer 1

好的，其他div之一引起了問題，按照我的建議增加高度后，它現在可以工作了。 謝謝您的指示。Lister先生-如果您要我為您標記它，可以隨時添加為答案。