CSS: display:table floating when add content - html

Question

I have to implement this content:
<div class="content">
<div class="row">
<div class="cell"> </div>
<div class="cell" id = "up_lft"></div>
<div class="cell" id = "up_rgh"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"> </div>
<div class="cell" id = "dwn_lft"></div>
<div class="cell" id = "dwn_rgh"></div>
<div class="cell"> </div>
</div>
</div>
and the CSS
.content{
display: table;
margin-top:22px;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
width:auto;
vertical-align:top;
}
#up_lft{
width:100px;
min-width:100px;
height:125px;
background-color:#8E9090;
outline: 1px solid white;
}
#up_rgh{
width:100px;
min-width:100px;
height:125px;
background-color:#8E9090;
outline: 1px solid white;
}
#dwn_lft{
width:100px;
min-width:100px;
height:125px;
background-color: #394249;
outline: 1px solid white;
}
#dwn_rgh{
width:100px;
min-width:100px;
height:125px;
background-color:#872434;
outline: 1px solid white;
}
on fiddle here:
http://jsfiddle.net/reJ7e/
I choose css display:table only because i need those boxes to stay on the center of the page no matter of screen resolution. I also need to add something after the bottom right div (a small height div that extends itself to the margin right screen and having a background image)
The problem is that if i try to put anything else but in that div, all design is moving to the left. messy.
Any suggestions please? I am open to change the css display: table - but i don't know how to do it (all 4 boxes stay center)
Note that i also have a header with a menu having the same width above those boxex
Thanks

Answer 1

You can avoid display table and use position: absolute and also transforming the origin point of the element to make it exactly in the middle of the page:
position: absolute;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
top: 50%;
left: 50%;
Any element given this style will stay at the center of the page.. if you want it to stay at the center of the window just change from position: absolute to position: fixed.
Here's an illustration fiddle