Centralizar Web

Hola a todos los programadores de este foro, he intentado de todo para tratar de centralizar la plantilla de mi pagina web, ya probe como centralizar la cabecera de la pagina y ya he resuelto centralizar la cabecera, pero lo que no he podido centralizar es una plantilla de 1000x1000 pixeles que me sale en la parte izquierda..

Aqui les copio el codigo index donde esta en enlace a la imagen grid_1 que es la que quiero centralizar. he tratado de todo para centralizarla y no he podido. espero que me puedan ayudar...

<table cellspacing="0" cellpadding="0">
{foreach item=grids from=$rows}
<tr>
{foreach item=grid from=$grids}
<td>
{if !$smarty.session.magnify}<map name="grid_{$grid->id}">{$grid->map()}</map>{/if}<div style="float: left"{if $smarty.session.magnify} onmouseover="zoom_on(event,{$grid->width|escape},{$grid->height|escape},'{$grid->url()|escape}');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"{/if}><img src="{$grid->url()|escape}" usemap="#grid_{$grid->id}" width="{$grid->width|escape}" height="{$grid->height|escape}" alt="" border="0" /></div><div style="clear: both"></div>
</td>
{/foreach}
</tr>
{/foreach}
</table>


Tambien les copio el codigo style.css

body {
margin: 0 auto;
background: #DDDDFF;
}

body, td, input, select {
font: normal 12px Arial,Helvetica,sans-serif; margin: 0 auto;
}

p, form {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

h1 {
font-size: 22px;
}

h2 {
font-size: 16px;
}

div.toolbar {
background: #646464;
padding: 5px;
color: #FFFFFF;
width: 989px;
}


div#cabeza2 {
background-color:#c69e29;
height:20px;
width: 996px;
}


div.toolbar a {
color: #FFFFFF;
}


#language_selector {
font-size: 11px;
}

div.content {
padding: 5px;
color: #333333;
}
div.content a {
color: #333333;
}

div.content a:hover {
color: red;
}

.error, .notice {
color: red;
}

div.error {
padding: 5px;
border: 1px solid #666666;
background: white;
}

.boxed {
padding: 5px;
border: 1px solid;
margin-left: 2em;
margin-right: 2em;
}

.indent {
margin-left: 2em;
}

td.label {
text-align: right;
white-space: nowrap;
padding-right: 5px;
width: 1%;
}

table.grid {
border-collapse: collapse;
}

table.grid td, table.grid th {
padding: 5px 15px 5px 15px;
}

table.grid th {
background: #AAAAFF;
}

div.snippet {
white-space: nowrap;
}

div.snippet select {
font-size: 10px;
vertical-align: middle;
}

div.snippet input {
vertical-align: middle;
}

div.snippet textarea {
width: 100%;
}

input {
vertical-align: bottom;
}

div.alert {
margin: 25px;
text-align: center;
padding: 10px;
background: white;
border: 2px solid red;
font-size: 12px;
font-weight: bold;
}

div.blog_article {
border-bottom: 1px dashed #AAAAAA;
}

p.blog_article_title {
font-weight: bold;
font-size: 16px;
}

p.blog_article_date {
font-style: italic;
color: #888888;
}

div.blog_comment {
border-bottom: 1px dashed #AAAAAA;
}

textarea.code {
font: normal 12px Arial,Helvetica,sans-serif;
width: 450px;
background-color: #eeeeee;
border-color: #cccccc;
border-style: inset;
margin-top: 5px;
}

p.blog_comment_date {
font-style: italic;
color: #888888;
}

.tabberlive .tabbertabhide {
display: none;
}

.tabber {
display: none;
}
.tabberlive {
margin-top:1em;
}

ul.tabbernav
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #AAA;
/* font: bold 12px Verdana, sans-serif */;
font-weight: bold;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #AAA;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #AAA;
}

ul.tabbernav li.tabberactive a
{
background-color: #fff;
border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
border-bottom: 1px solid white;
}

.tabberlive .tabbertab {
padding: 5px;
border: 1px solid #aaa;
border-top: 0;
}

.tabberlive .tabbertab h2 {
display: none;
}
.tabberlive .tabbertab h3 {
display: none;
}

.tabberlive#tab2 .tabbertab {
height: 200px;
overflow: auto;
}

.hidde {
display: none;
}

.popup {
padding: 5px;
}

#WzTtDiV {
background: #e6ecff;
}

<div style="float: left"

Cambialo por

"margin-left:50%" "margin-right:50%"

Hola Francisco1 me ha resuelto el problema de la centralizacion, pero veo que el codigo "margin-left:50%" "margin-right:50%" me aparese bisible al final de la pagina, mira como se ve.

[contenido no disponible]

asi quedo el codigo...

<table cellspacing="0" cellpadding="0">
{foreach item=grids from=$rows}
<tr>
{foreach item=grid from=$grids}
<td>
{if !$smarty.session.magnify}<map name="grid_{$grid->id}">{$grid->map()}</map>{/if} "margin-left:50%" "margin-right:50%" {if $smarty.session.magnify} onmouseover="zoom_on(event,{$grid->width|escape},{$grid->height|escape},'{$grid->url()|escape}');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"{/if}><img src="{$grid->url()|escape}" usemap="#grid_{$grid->id}" width="{$grid->width|escape}" height="{$grid->height|escape}" alt="" border="0" /><div style="clear: both"></div>
</td>
{/foreach}
</tr>
{/foreach}
</table>

Ponlo asi el codigo

<div style="margin-left:50%" "margin-right:50%"

Hola Francisco1, si lo coloco con el <div style como me indicaste se rueda la plantilla para el lado derecho...

Entra a la pagina para que veas como se ve la plantilla..
http://dosmillones.besaba.com/index.php

De eso se trata reduce los 50% por ejemplo a 30 o 25% asta que quede centrada no es eso lo que quieres

Hola francisco1 esta muy buena tu idea, de esa forma se puede centralizar cambiandole los porcientos, pero si uso un porciento que me convine con el encabezado, pero al minimizar la pagina con (ALT -) O al vizualisar la pagina desde un monitor mas grande se veran desentralizados, el encabezado por un lado y la plantilla por otro lado...

Entra a la pagina y ponla pequeña para que veas como se desfigura

http://dosmillones.besaba.com/

Puede ser que no tiene css responsive i quizas no funcione bien por eso lo pusieron en el lado izquierdo

no entendi bien lo que quisiste desirme francisco, pero de todos modos. graicas

Hola!

Para centrar cualquier elemento de la web cuyo tipo sea block / bloque (Google), tienes que hacer lo siguiente:

1.- Darle un ancho fijo al elemento que quieres centrar (width: 350px).
2.- Dar un margen como este: 0 auto;.

Por ejemplo:

<style>
  .centrado { width: 350px; margin: 0 auto; }
</style>

<div class="centrado">
  <p>Contenido...</p>
</div>

Gracias por su ayuda muchachos, en especial a skaparate me sirvio de mucho tu ayuda......

Hola, he metido todo los parámetros que me ponéis para poder centrar párrafo pero no se mueve se queda tal cual. Cual puede ser el problema. Gracias