Casi siempre tenemos la necesidad de centrar cierta parte de nuestro contenido y en este tutorial te mostramos como hacerlo de un par de formas:

PRIMERA FORMA: MARGENES NEGATIVOS

    1. Vamos a nuestro código HTML y definimos lo que ira centrado de la siguiente forma:
<div id=“contenedor_centrado”>
<p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p>
</div>
  1. Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor_centrado” de la siguiente forma
<style type="text/css">
#contenedor_centrado {
position:absolute;
top: 50%;
left: 50%;
height:400px;
width:600px;
margin-top:-200px; /* El margin top es la mitad del alto de nuestro contenedor, en este ejemplo 400px/2=200px */margin-left:-300px /* El margin left es la mitad del ancho, en este ejemplo 600px/2=300px*/
}
</style>

Esta forma es sencilla y rápida de implementar y el hecho de manejar un contenedor también te da la posibilidad de definir otras propiedades como el color de fondo, links y letra.

SEGUNDA FORMA: MARGENES EN AUTO

    1. Vamos a nuestro código HTML y definimos lo que ira centrado de la siguiente forma:
<div id=“contenedor_centrado”>
<p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p>
</div>
    1. Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor_centrado” de la siguiente forma
<style type="text/css">
body{text-align:center;}
#contenedor{margin: 0px auto;}
</style>

La propiedad “auto” en el contenedor es quien realiza la labor de centrar, pero en IE 6.0 y anteriores no reconoce esta propiedad por lo que hacemos un pequeño hack y en el body definimos un texto alineado al centro, que termina centrando todo el contenido de nuestro contenedor.

Ojala que les sirva 🙂