html - 垂直对齐 div 红色

Question

有人可以看看我的 jsfiddle，看看是否可以使红色 div 在中间垂直对齐，并使红色 div 也居中。您必须使包含红色 div 的 div 具有一定高度

jsFiddle

<div class="container">
    <div class="row1">
        <div>
            <div style="height:200px; width:725px; background-color:red; margin:0px auto">A</div>

        </div>
        <div></div>
    </div>
    <div class="row2">
        <div>B</div>
        <div>C</div>
    </div>
</div>

html, body {
    height:100%; margin:0px; padding:0px    

}
.container {
    width: 100%;
    height: 100%;
    display:table;    
    position: relative;
}
.row1 {
    display:table-row;
    max-height: 425px;
    background: pink;
}
.row1 div {
    display:table-cell;
    width:100%;
}
.row2 {
    display:table-row;
    height: 100%;
}
.row2 div {
    width: 100%;
    height: 100%;
    float:left;
    background: green;
}
.row2 div + div {
    background: aqua;
    width: 50%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
}
@media (max-width: 1024px) {
    .row1 {
        width: 100%;
    }
    .row1 div + div {
        display: none;
    }
    .row2 div + div {
        width:50%
    }
    .row2 div {
        width: 50%;
    }
    .row2 div + div {
        position: static;
    }
}

Answer 1

只要稍作改动，您的 table-cell 规则就只适用于您所调用的 table-row 的直接子项:.row1 > div 而不是 .row1 div。查看更新:http://jsfiddle.net/Xgr3k/11/

这解决了您的问题，只是现在只要您的宽度 > 1024，您的浅绿色 div 就会弹出。发生这种情况是因为您的媒体查询并将该 div 设置为 position: static。我不确定你想做什么。但是，基本上，请注意您的规则如何向下级联您的 DOM。祝你好运:)