html - 垂直居中三个 div，一个在另一个里面

Question

这就是我的目标。我有两个圈子。内部是固定的，外部是动态的并且会增长/收缩。两个圆应该是同心的。所以我创建了两个分区，将边界半径设为 50% 来创建圆圈。我使用表格单元法将它们垂直居中。但是，我现在需要将外部 div 在 body 中垂直居中。我怎样才能做到这一点？

编辑：http: //jsfiddle.net/G28t8/

function updateCircle(){
            document.getElementById("outercircle").style.width = parseInt(document.getElementById("outercircle").style.width.split("px")[0]) + 5 + "px";
            document.getElementById("outercircle").style.height = parseInt(document.getElementById("outercircle").style.height.split("px")[0]) + 5 + "px";
            document.getElementById("outercircle").style.lineHeight = document.getElementById("outercircle").style.height;

        }

Answer 1

您可以只修改 html & body 的布局显示，并利用表格布局规范：

用于一些类似问题的示例小提琴（删除不需要的 div ;)）：http: //jsfiddle.net/GCyrillus/jGtAv/3/

html {
    text-align:center;
    display:table;
    width:100%;
    height:100%;
}
body {
    display:table-cell;
    vertical-align:middle;
}