вертикально выровнять div красный

Question

Может кто-нибудь, пожалуйста, взгляните на мой jsfiddle и посмотрите, можете ли вы сделать красный 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/

Это устраняет вашу проблему, за исключением того, что теперь ваш цветной div div появляется каждый раз, когда ваша ширина> 1024. Это происходит из-за вашего медиа-запроса и установки этого div на position: static. Который я не уверен, что вы хотите сделать. Но, в основном, будьте осторожны, как ваши правила каскадируют ваш DOM. Удачи :)