Centering div content within multiple nested divs - html

Question

I am trying to center some so that they are displayed within the center, however the tricky part is the html is within a number of (part of the html is static, and part of it is dynamic from a database).
See the screenshot as an example of how it currently looks (I want this content in the centre)
http://postimg.org/image/5fc6ecgy7/
note - the site is using the base 960 grid system
Below is the HTML:
<div class="">
<div class="">
<div class="">
<div id="national-prize-feed" class="panel-wrapper ">
<div class="border">
<div class="content clearfix add-radius">
<div style="padding:10px 0px;">
<div id="nation-prizes-collection" class="clearfix">
<div class="summary"></div>
<div class="">
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png">
</div>
</div>
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="Football" src="/images/prizes/football.png">
</div>
</div>
</div>
<div class="keys" title="/pages/index/slug/prizes" style="display:none">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My specific css (there is a lot more.. it is based on a grid based layout)
div.prizes {
float: left;
}
div.prizes img {
width: 280px;
}
.prizes-img {
padding: 0 7px 0 7px;
margin: 7px 5px 7px 5px;
max-width: 100%;
height: auto;
}

Answer 1

In order to position a DIV to the center of a screen, you need to set a static width of the div to be centered, left: 0px, right: 0px, and the respective margins to auto.
Here is an example: http://jsfiddle.net/pR4hq/
<style>.center{
position: relative;
display: block;
width: 120px;
background: rgb(90,90,90);
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}</style>
<div class="center">Center Content</div>