Html 如何垂直对齐此红色框内的这两个长方体？

如何在红色框内垂直对齐白色框和绿色框。我希望它看起来像下面的图片。谢谢你。男人是最好的。这是

*{
填充：0；
保证金：0；
}
.盒子{
宽度：600px；
高度：600px；
位置：绝对位置；
保证金：自动；
左：0；
右：0；
底部：0；
排名：0；
背景：红色；
}
.box2{
保证金：0自动；
背景：绿色；
宽度：100px；
高度：100px；
}
.box3{
保证金：0自动；
背景：白色；
宽度：100px；
高度：100px；
}
.整体背景{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,5）；
}

红色框应用作表格单元格。 这两个小框应显示在内联块中

水平对齐：文本对齐：居中； 垂直对齐：垂直对齐：中间

结果:

---

.box2{margin top:200px；}：）jocking对于

.box

仍然有一些非常重要的样式，您没有提到（尽管它们存在于代码中）。

.box

的宽度等于内框的宽度（

100px

）（将两个内框放在单独的行中），并设置

填充：0 250px

，使

.box

的总宽度等于

600px

。我喜欢这个解决方案：）+1@jgthms，但我仍然希望红色框与窗口（浏览器）垂直对齐中间和水平对齐中心。@sopanha您可以添加此样式的

主体{display:table；margin:auto；}

，因为

主体

是

框

的容器。如果它有另一个容器，只需用该容器替换

body

。@KingKing add style body不会使红色框垂直居中对齐浏览器。@sopanha看起来必须使用带有绝对定位的最终解决方案（对于

框

），请在基于webkit的浏览器上尝试此方法

<style>
    *{
        padding:0;
        margin:0;
    }
    .box{
        width:600px;
        height:600px;
        position: absolute;
        margin:auto;
        left:0;
        right:0;
        bottom:0;
        top:0;
        background: red;
    }

    .box2{
        margin:0 auto;
        background: green;
        width:100px;
        height:100px;
    }

    .box3{
        margin:0 auto;
        background: white;
        width:100px;
        height:100px;
    }
    .whole-background{
        position: absolute;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.5);
    }
</style>
    <div class="whole-background"></div>

    <div class="box">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>  

*{
    padding:0;
    margin:0;
}
.box{
    width:100px;
    height:600px;
    margin:auto;
    background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 250px;
}

.box2{
    margin:0 auto;
    background: green;
    width:100px;
    height:100px;
display: inline-block;
vertical-align: middle;
}

.box3{
    margin:0 auto;
    background: white;
    width:100px;
    height:100px;
display: inline-block;
vertical-align: middle;
}
.whole-background{
    position: absolute;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.5);
}