Blog and Web

Centrar contenido con CSS

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:

  2. <div id=“contenedor_centrado”>
    <p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p>
    </div>

  3. 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:

  2. <div id=“contenedor_centrado”>
    <p>Aquí puede ir cualquier tipo de contenido, imagenes, texto y lo que deseemos</p>
    </div>

  3. Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor_centrado” de la siguiente forma

  4. <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 🙂