Question

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

<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/

这可以解决您的问题，除非您的宽度＆gt;现在您的浅绿色div突然出现。 1024.由于您的媒体查询并将div设置为position: static，这种情况正在发生。我不确定你想做什么。但是，基本上，要小心你的规则如何级联你的DOM。祝你好运：）

垂直对齐div红色

1 个答案: