vertically align div red - html

Question

Could someone please have a look at my jsfiddle and see if you can make the red div vertically align in the middle and get the red div to be centred as well. You will have to make the div that contains the red div a certain height
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

Just a small change makes your table-cell rule apply only to the immediate children of what you're calling table-row: .row1 > div instead of .row1 div. See the update: http://jsfiddle.net/Xgr3k/11/
This fixes your problem except now your aqua colored div is popping up whenever your width > 1024. That's happening because of your media query and setting that div to position: static. Which I'm not sure you want to do. But, basically, be careful about how your rules cascade down your DOM. Good luck :)