Este documento proporciona instrucciones para centrar una página web mediante el uso de etiquetas DIV y CSS. Explica cómo crear una etiqueta DIV principal con un ancho del 100% que contenga otra etiqueta DIV interior con posición relativa, márgenes automáticos y un tamaño fijo. Dentro de esta segunda etiqueta DIV se puede insertar una imagen o color de fondo. Esto permite centrar de manera responsiva el contenido de la página.

1. CENTRAR PÁGINA Diseño Web
1. Nuevo HTML
2. Propiedades de la Pagina / Apariencia
/ Margen (Todos los márgenes 0 px)
3. Insertar / Objetos de Diseño / Etiqueta
Div
4. Solamente ponemos nombre en ID
poner (fondocentrar), los demás
parámetros dejamos tal cual.
5. Eliminar el texto que aparece por
defecto
6. Comprobar el tamaño de la imagen
que vamos a insertar de fondo, por lo
general trabajar la imagen de fondo a
(1024 x 1000 px)
7. A continuación en el panel Estilos CSS /
Todo, click derecho / Nuevo
8. Tenemos la siguiente ventana:
En Tipo de selector señalamos ID (solo
aplicable a un elemento HTML), en
nombre de selector ubicamos al que
nombramos en la etiqueta Div en este
caso (fondocentrar) / Aceptar
Nos aparecerá una ventana de
definición de regla CSS para
(fondocentrar) no modificamos nada /
Aceptar
9. En el Panel Estilos CSS / Todo / nos
ubicamos en la regla #fondocentrar y
en Propiedades de #fondocentrar /
Añadir Propiedades

2. CENTRAR PÁGINA Diseño Web
Una vez que damos click en Añadir
Propiedades / seleccionamos Width y
colocamos el porcentaje de 1024 px
(que es el tamaño de fondo de la
imagen que vamos a insertar) A
continuación Añadir propiedades y
click en Height de igual manera el
porcentaje que tengamos en la imagen
(1000 px), luego background-image / y
buscamos la imagen que vamos a
insertar, En el caso que no desee
insertar imagen de fondo, hay varios
parámetros para insertar el
background. Deberá quedarle como
esta captura de imagen. No se olviden
que estamos dando propiedades a
#fondocentrar
10. Pues bien ahora ya tenemos insertado
la imagen o color de fondo, ahora
dividimos la pantalla en Código/Diseño
(Dividir) y borramos este código que se
encuentra dentro de la etiqueta body:
<div id="fondocentrar"></div>
Ahora copiamos este código:
<div id="fondocentrar">
<div id="fondocentrar">
<div
id="fondocentrar"></div>
</div>
</div>
Lo que hemos hecho es tener 2
etiquetas Div más de #fondocentrar,
quedara algo así:
11. Ahora lo que vamos hacer es
renombrar las etiquetas Div, nos
ubicamos en la primera etiqueta Div
cambiamos el nombre #fondocentrar y
cambiamos por el nombre (todo),
posterior a esto nos ubicamos en la
segunda etiqueta Div y le cambiamos a
(grupo) , quedara de la siguiente
manera
12. A continuación en el panel Estilos CSS /
Todo, click derecho / Nuevo
13. De igual manera que hicimos para
fondocentrar lo hacemos para (todo)
Tenemos la siguiente ventana:
En Tipo de selector señalamos ID (solo
aplicable a un elemento HTML), en
nombre de selector ubicamos al que
nombramos en la etiqueta Div en este
caso (todo) / Aceptar / aparecerá la
venta de definición de regla CSS para
(fondo) no modificamos nada /
Aceptar
14. En estilos CSS se habrá creado el
nuevo estilo (todo) lo señalamos y
Añadimos Propiedades de igual
manera que lo hicimos con fondo
centrar, en este caso solo le vamos a
dar una Propiedad que es la de (width
100%) no pixeles, sino %, quedara algo
así:

3. CENTRAR PÁGINA Diseño Web
Ahora solo queda Añadir un nuevo
Estilo CSS para (grupo), de igual
manera que en los dos casos
anteriores añadimos un Nuevo estilo.
En Tipo de selector señalamos ID (solo
aplicable a un elemento HTML), en
nombre de selector ubicamos al que
nombramos en la etiqueta Div en este
caso (grupo) / Aceptar / aparecerá la
venta de definición de regla CSS para
(grupo) no modificamos nada /
Aceptar
15. En estilos CSS se habrá creado el
nuevo estilo (grupo) lo señalamos y
Añadimos Propiedades, que serán las
siguientes:
position: relative
margin: auto
width: 1024 px
height: 1000 px
(Los valores en width y height son los
que desde el principio determinamos)
Tendrán una ventana igual a esta
En Resumen:
Lo que hemos hecho es crear una
etiqueta Div que contiene todo el
contenido de la página, a la cual le
dimos la propiedad de width 100% y
dentro de esta etiqueta esta otra
etiqueta Div a la que le llamamos
grupo está en cambio se encargara de
que este en la posision relativa, los
márgenes que detecte automáticos
según sea la resolución de la pantalla
donde vaya hacer previzualizada la
página y el tamaño que se determinó
al comienzo, y por ultimo una etiqueta
Div la cual contendrá ya sea la imagen
de fondo, color, etc.
Espero les sirva de ayuda para que
puedan realizar de mejor manera su
Proyecto.
Un saludo
Paolo