21

1

Centra páginas web y bloques flotantes

Algo básico en el diseño web es maquetar correctamente una página, que en la mayoría de los casos se empieza por centrar la página y a partir de ahí continuar con la maquetación, pero no solo hay una forma de centrar un contenido y no todas las formas son iguales.
La propiedad margin es la idónea y básica para centrar toda la estructura de una web, estableciendo que su margen lateral sea automático (y se distribuya simétricamente en cada lado), pero también veremos formas más complejas.

La primera forma de hacer que nuestra página se centre en la pantalla es la usual, "margin:0px auto", que se encarga de centrar horizontalmente un elemento contenedor de toda la página.
Pero no solo os explicaré este método, también os explicaré como centrar elementos vertical y horizontalmente según el tamaño de la ventana, que por ejemplo nos podría servir para crear un cuadro emergente con un formulario y queremos que en los laterales tenga un margen específico distinto en cada lado.

1. /* Centrado básico */
2. margin: 0px auto;

Páginas fluidas

En los Responsive Designs hay personas que deciden que ocupen toda la pantalla, o se adapten a un lateral, pero esta técnica de diseño es totalmente compatible con el centrado de la página y no supone ningún esfuerzo mayor, simplemente hay que usar un margen automático y un ancho máximo (una forma básica de crear diseños adaptables).

1. /* Centrado básico para Responsive Design */
2. margin: 0px auto;
3. width: 100%;
4. max-width: 800px;

Páginas fluidas con distintos márgenes

Por razones de diseño puede que tengamos que tener distintos márgenes en los laterales, pero que mantenga la página una proporción en todo momento, esto lo podemos hacer fácilmente con porcentajes (usándolo en el ancho y en el margen de la propia página).

1. /* Centrado con desplazamiento (en porcentaje) */
2. margin-left: 20%;
3. margin-right: 10%;
4. width: 70%;

Bloques flotantes centrados

Otra necesidad que tienen muchas páginas y aplicaciones web es la de tener bloques (de aviso o que tendremos siempre en la página, como barras laterales) que tenemos que maquetar de forma correcta y teniendo en cuenta que no todo puede tener un tamaño fijo, sino que algunas veces tenemos que adaptarnos al tamaño de la ventana.
Estos bloques al flotar (y usar posiciones absolute o fixed) debemos de establecer su desplazamiento en lugar de con márgenes con propiedades de posición (top, bottom, left y right).

En este primer ejemplo tendremos un margen del 30% del bloque centrado, pero podemos configurarlo de cualquier forma, con porcentajes o con márgenes exactos (con píxeles).

1. /* El bloque tiene que tener una posición "fixed" o "absolute" */
2. top: 30%;
3. bottom: 30%;
4. left: 30%;
5. right: 30%;

Centrar bloque flotante con un tamaño fijo

Otra cosa que podemos necesitar es tener un bloque con un tamaño fijo centrado en la pantalla, para hacerlo usaremos un método un poco "anticuado" pero es el que seguro funciona (aunque hay otros).
Para poner en marcha este lo que tenemos que hacer es lo siguiente:

• Dar un tamaño fijo al alto y el ancho del bloque.
• Tener un top y left al 50%.
• Restar al margen superior la mitad del alto y al de la izquierda la mitad del ancho.

1. /* El bloque tiene que tener una posición "fixed" o "absolute" */
2. width: 300px;
3. margin-left: -150px; /* La mitad del ancho */
4. height: 100px;
5. margin-top: -50px; /* La mitad del alto */
6. left: 50%;
7. top: 50%;