Laboratorio Web

MENU

Centrar elementos con CSS

Una de las primeras taréas que se aprende con CSS es a centrar nuestros elementos en la web.

El javaScript y jQuery nos ayudan mucho también en esta taréa, especialmente con contenidos dinámicos, y con la llegada de CSS3 han surgido, y se están desarrollando nuevas alternativas para centrar nuestros contenidos.

En este artículo nos centraremos exclusivamente en técnicas CSS para dejar las cosas en su término medio, desde el típico "margin: auto", position o float hasta nuevos conceptos como el modelo flex-box o los nuevos drafts de desarrollo donde encontraremos términos como position: center o float: positioned que están por llegar... o no.

1.- Centrado Horizontal de Elementos

1.1.- Ancho fijo y conocido

CENTRO CON ANCHO FIJO Y CONOCIDO

Este quizás sea el ejemplo más típico que nos encontremos.

Sabiendo la anchura de un elemento, simplemente con la propiedad margin: auto; se centrará respecto a su contenedor padre.

HTML

<div class="padre">
   <div class="hijo">
     CENTRO CON ANCHO FIJO Y CONOCIDO
   </div>
</div>		

CSS

.hijo {
  background-color: #EE82EE;
  margin: auto;
  width: 150px;
}					

1.2.- Ancho relativo conocido

CENTRO CON ANCHO RELATIVO CONOCIDO

La anchura del elemento a centrar nos viene dada en %.

Al igual que en el ejemplo anterior, con la propiedad margin: auto; se centrará el elemento.

HTML

<div class="padre">
   <div class="hijo">
     CENTRO CON ANCHO RELATIVO CONOCIDO
   </div>
</div>		

CSS

.hijo {
  width: 60%;
  margin: auto;
  background-color: #5B9CF7;
}					

1.3.- Ancho desconocido

CENTRO CON ANCHO DESCONOCIDO

Cuando no sabemos la anchura de una caja, debemos recurrir a los márgenes laterales que la rodean para centrarla respecto a su contenedor.

Por ejemplo, dándole un margin: 0 20%;, haremos que la caja tenga un margen del 20% a cada lado (40%), y por lo tanto ocupará el 60% de espacio restante con respecto a su contenedor.

HTML

<div class="padre">
   <div class="hijo">
     CENTRO CON ANCHO DESCONOCIDO
   </div>
</div>		

CSS

.hijo {
  margin: 0 20%;
  background-color: #C9DD2C;
  padding: 1em 3em;
}					

2.- Centrado Horizontal y Vertical con position

2.1.- Medidas conocidas (relativas y/o absolutas)

CENTRADO CON POSITION 1

Sabiendo la anchura y altura de un elemento es cuestión de aplicar matemáticas.

Lo posicionamos absolutamente respecto a su padre, dándole unas propiedades top y left del 50%, y le restamos, o mejor dicho, aplicamos un margin negativo superior e izquierdo que se corresponden con la mitad de la altura y anchura respectivamente.

Si las dimensiones del hijo nos viniesen dadas de forma relativa, el proceso sería exactamente el mismo.

HTML

<div class="padre">
   <div class="hijo">
     CENTRADO CON POSITION 1
   </div>
</div>		

CSS

.padre {
  position: relative;
  width: 100%;
  height: 300px;

}
.hijo {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background-color: #C43834;
}

	

2.2.- Centrado Horizontal y Vertical. Padre con medidas fluidas y desconocidas, Hijo con medidas conocidas

CENTRADO 2.2

En este caso podemos aplicar el mismo método que en el caso anterior.

Posicionándolo absolute respecto a su contenedor, con un top: 50%; y left: 50%; y dándole un margin-top y margin-left negativo correspondientes a la mitad de la altura y la mitad de la anchura del elemento a centrar, obtenemos el resultado.

Obviamente, si por algún motivo el contenedor reduce su tamaño a valores menores que los del elemento a centrar, este último desbordará.

HTML

<div class="padre">
   <div class="hijo">
     CENTRADO 2.2
   </div>
</div>		

CSS

.padre {
  position: relative;
  width: 100%;
  height: 220px;

}
.hijo {
  background-color: #46D836;
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

	

2.3.- Centrado Horizontal y Vertical. Sin márgenes negativos con position: absolute

CENTRADO HORIZONTAL Y VERTICAL. SIN MÁRGENES NEGATIVOS CON POSICIÓN ABSOLUTA

Este tipo de centrado es una locura...

Es imposible que se cumplan las cuatro propiedades top, left, bottom, right con valores a 0 simultáneamente, cada valor es una esquina opuesta del contenedor. Sin embargo, al darle estas propiedades más un margin: auto -siempre que tenga una anchura width a la que aplicarse- , misteriosamente el contenedor queda en el mismo centro.

HTML

<div class="padre">
   <div class="hijo">
     CENTRADO 2.3
   </div>
</div>		

CSS

.padre {
  position: relative;
  width: 100%;
  height: 220px;
}

.hijo {
  background-color: #46D836;
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
	

2.4.- Centrado Horizontal y Vertical. Medidas desconocidas con transform: translate

CENTRADO HORIZONTAL Y VERTICAL. MEDIDAS DESCONOCIDAS CON TRANSFORM

Aquí recurrimos en una primera instancia a posicionar el elemento como absolute y colocarlo a un top: 50%; left: 50%;.

Ahora jugamos con transform. Según la W3C en el grupo de trabajo titulado CSS Transforms Module Level 1, al aplicar una transformación sobre un elemento, se establece un sistema de coordenadas sobre dicho elemento.

Es decir, al aplicar un transform: translate(-50%, -50%);, cogemos un 50% del elemento sobre los ejes "x" e "y" (su ancho y alto), similar a cuando aplicabamos un margen negativo correspondiente a la mitad de su anchura y altura.

HTML

<div class="padre">
   <div class="hijo">
     CENTRADO 2.4
   </div>
</div>		

CSS

.padre {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.hijo {
    background-color: #B778DB;
    position: absolute;
    left: 50%;
    top: 50%;
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

	

2.5.- Centrado Horizontal y Vertical. Múltiples elementos en tamaños desconocidos o ventanas dinámicas

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4
  • ITEM 5

Para centrar elementos con este método, daremos un valor de line-height a los elementos de la lista li, y el doble de ese valor en un margin-top negativo al ul, al que también le daremos un text-align: center;.

HTML

<div class="padre">
	<ul>
		<li>ITEM 1</li>
		<li>ITEM 2</li>
		<li>ITEM 3</li>
		<li>ITEM 4</li>
		<li>ITEM 5</li>
	</ul>
</div>		

CSS

.padre {
  position: relative;
  width: 100%;
  min-height: 100px;
}

.padre ul {
  padding: 0;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -15px;
  text-align: center;

}
.padre ul li:first-child {
  margin-left: 0;
}
.padre ul li {
  margin-left: 5px;
  display: inline-block;
  background-color: #5fa9c5;
  padding: 0 10px;
  line-height: 30px;
}
	

2.6.- Centrado Horizontal y Vertical con calc()

CENTRADO HORIZONTAL Y VERTICAL CON CALC()

La función calc() en CSS aun no está implementada en todos los navegadores, por lo que hay que conocer sus limitaciones.

Al asignarle el valor calc(50% -6rem), siendo 6rem la mitad de la dimensión buscada (anchura en este caso), lo centraremos horizontalmente al igual que cuando le dabamos un valor left: 50%; y después le restabamos la mitad de la anchura con un margin-left negativo. Ídem para centrarlo verticalmente.

HTML

<div class="padre">
   <div class="hijo">
     CENTRADO 2.6
   </div>
</div>		

CSS

.padre {
  position: relative;
  min-height: 200px;
}
.hijo {
  height: 10rem;
  width: 12rem;
  position: absolute;
  left: calc(50% - 6rem);
  top: calc(50% - 5rem);
  background-color: #B74343;
}
	

3.- Centrado de Texto

3.1.- Centrado Horizontal y Vertical de Texto

CENTRADO HORIZONTAL Y VERTICAL DE TEXTO

Para el centrado horizontal, basta con un simple text-align: center;.

Para centrar verticalmente el texto, jugaremos con la propiedad line-height. Dándole al texto un valor de line-height igual a la altura del contenedor padre, el texto se centrará verticalmente.

HTML

<div class="padre">
   <p class="hijo">
     CENTRO 3.1
   </p>
</div>		

CSS

.padre {
  height: 100px;
}
.hijo {
  line-height: 100px;
  text-align: center;
}				

4.- Centrado con display: table

4.1.- Centrado con display: table

CENTRADO CON DISPLAY TABLE

Si cada vez que ves una tabla te dan ganas de sacar el hacha, no te preocupes, este no es el caso.

En este método utilizamos la propiedad display con los valores table, table-row y table-cell, haciendo que nuestro contenido se muestre como si estuviera dentro de una tabla.

Le añadimos las propiedades vertical-align: middle; y text-align: center; para centrarlo vertical y horizontalmente, como si se tratara de un elemento dentro de una celda.

HTML

<div class="padre" >
   <div class="hijo">
     <p class="nieto">
	  CENTRADO CON DISPLAY TABLE
     </p>
   </div>
</div>		

CSS

.padre {
  display: table;
  width: 100%;
  height: 120px;
}

.hijo {
  display: table-row;
}

.nieto {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #143100;
}			

4.2.- Centrado con display: table y margin: auto

CENTRADO CON DISPLAY TABLE II

Otro modo de centrar con display:table y margin: auto un contenedor.

Aquí le damos los roles de table al contenedor superior, de table-cell con vertival-align: middle; a un contenedor intermedio, y dentro de éste, el elemento a centrar, con una anchura, relativa o absoluta, y la propiedad margin: 0 auto; para que se centre.

HTML

<div class="padre" >
   <div class="hijo">
     <p class="nieto">
	  CENTRADO CON DISPLAY TABLE II
     </p>
   </div>
</div>		

CSS

.padre {
  display: table;
  width: 100%;
  height: 120px;
}
.hijo {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.nieto {
  width: 50%;
  margin: 0 auto;
  background-color: #D2B48C;
}			

4.3.- Centrado Horizontal con display: table sin conocer el elemento a centrar

imagen de ejemplo

Esto es un poco rizar el rizo... Obtendríamos el mismo resultado resultado declarando un display: block, pero por variar la rutina podemos declarar un display: table, que actua como elemento en bloque, y aplicarle un margin: auto para que se centre automáticamente.

HTML

<div class="padre" >
   <img src="imagendeejemplo.png" alt="imagen de ejemplo" >
</div>		

CSS

.padre {
  width: 100%;
}

.hijo {
  display: table;
  margin: 0 auto;
}		

4.4.- Centrado Horizontal y Vertical con display: table sin conocer el elemento a centrar

CENTRADO HORIZONTAL Y VERTICAL CON DISPLAY TABLE SIN CONOCER EL ELEMENTO A CENTRAR

Con la combinacion de display: table para un contenedor padre y display: table-cell para un contenedor hijo, tenemos la ventaja de poder alinear al padre contenedor como un bloque, y al hijo como una celda a la que podemos alinear horizontal y verticalmente respecto a este.

HTML

<div class="padre" >
   <div class="hijo" >
   	  CENTRADO 4.4
   </div>
</div>		

CSS

.padre {
    display: table;
    height: 150px;
    width: 100%;
    padding: 1em;
}

.hijo {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: #7aad56;
}		

5.- Centrado Horizontal con float

5.1.- Centrar cajas flotantes sin ancho definido

ITEM 1 ITEM 200 ITEM 3000 ITEM 40000 ITEM 500000
 

Para este ejemplo he creado un contenedor adicional simplemente para efectos estéticos.

Se trata de utilizar float: left para el contenedor padre, dándole un position: relative y un left: 50%.

Dentro de este, colocamos un contenedor que dentro tendrá los elementos a centrar. A este contenedor también le aplicamos un float: left pero lo desplazamos hacia atrás con un position: relative; left: -50%; para compensar el anterior.

Finalmente colocamos en el último nivel del marcado html los elementos que queramos centrar. Les daremos un margin lateral para que cojan un poco de aire, y estarán centrados. No olvides corregir ese aire del margen lateral aplicando el correspondiente margen negativo al primer elemento del grupo para centrarlo del todo.

Para concluir, es necesario un clear: left; para limpiar los espacios que se hayan podido descuadrar con los float.

HTML

<div class="contenedorejemplo">
   <div class="padre" >
      <div class="hijo">
         <span class="nieto">ITEM 1</span>
         <span class="nieto">ITEM 200</span>
         <span class="nieto">ITEM 3000</span>
         <span class="nieto">ITEM 40000</span>
         <span class="nieto">ITEM 500000</span>
      </div>
   </div>
</div>
<div class="clearleft">&nbsp;</div>
		

CSS

.contenedorejemplo {
  min-height: 3em;
}
.padre {
 float: left;
 position: relative;
 left: 50%;
}
.hijo {
  margin: 0;
  padding: 10px 10px 20px 5px;
  position: relative;
  left: -50%;
}
.nieto {
  float: left;
  margin: 0 5px;
  padding: 4px;
  background: #990000;
  color: #eee;
  border: 2px solid #333;
}
.nieto:first-child {
  margin-left: 10px;
}
.clearleft {
  clear: left;
  height: 1px;
  margin-top: -1px;
}
			

5.2- Centrar elementos flotados con fit-content

Una de las novedades en CSS3 es el valor fit-content para la propiedad width.

Si a un elemento le declaramos la propiedad width: fit-content;, este no crece en función de la anchura disponible, si no que crecerá en función de su contenido.

A pesar de utilizar elementos flotados en este ejemplo, con width: fit-content; no vamos a necesitar ningún clear para limpiar espacios ni nada por el estilo.

La implementación de fit-content en los navegadores aun no es definitiva, pero sí muy prometedora.

Para más información sobre fit-content, puedes consultar el draft de la W3C titulado CSS Intrinsic & Extrinsic Sizing Module Level 3

HTML

<div class="contenedorejemplo">
   <nav class="padre" >
    <ul class="hijoejemplo hijo">
	  <li class="nieto"><a href="#">ITEM 1</a></li>
	  <li class="nieto"><a href="#">ITEM 200</a></li>
	  <li class="nieto"><a href="#">ITEM 3000</a></li>
	  <li class="nieto"><a href="#">ITEM 40000</a></li>
	  <li class="nieto"><a href="#">ITEM 500000</a></li>
   </ul>
  </nav>
</div>
		

CSS

ul.hijo {
  width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -ms-fit-content;
    width: -o-fit-content;
  /* ornamentales */
  margin: 0 auto;
  background-color: #8aa9b8;
  list-style-type: none;
  padding: 10px 5px;
}
li.nieto {
  float: left;
  /* ornamental */
  margin: 0 5px;
}
/* ornamentales */
li.nieto a {
  background-color: #664477;
  color: #fff;
  display: block;
  padding: 7px;
}
			

6.- Centrado de Elementos en Línea

6.1.- Centrado con vertical-align

imagen de ejemplo Texto que acompaña a la imagen

Cuando queremos centrar una sola línea de texto (para más de una línea hay que utilizar otro método) respecto a un bloque, tendremos que aplicar la propiedad vertical-align con valor middle a ese bloque, para que el elemento contiguo se centre verticalmente respecto a él.

En este ejemplo he utilizado una imagen de muestra y una línea de texto que se alinéa verticalmente respecto a la imagen. También podríamos utilizar un div con altura y anchura declaradas para que el texto se centrase sobre éste.

HTML

<div class="padre">
   <img alt="imagen de ejemplo" src="imagen.png">Texto que acompaña
</div>
		

CSS

.img {
  vertical-align: middle;
}
			

6.2.- Centrado vertical de múltiples líneas de texto respecto a una imagen

imagen de prueba
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.

Si el texto a centrar contiene varias líneas, o prevees que podrá tenerlas, el ejemplo anterior no nos servirá.

Debemos recurrir de nuevo a display: table; y display: table-cell;.

Le damos un display: table; a un elemento contenedor, y le damos un display: table-cell; a los elementos que queremos centrar: una imagen (en este ejemplo) y otro display: table-cell al contenedor del texto, un figcaption en este caso.

Obsérvese que la principal diferencia con el anterior, es que antes el texto fluía seguido del elemento de una imagen, de un modo como <p> <img ...> TEXTO <p>. En los nuevos casos sería: <p><img ...></p> <p>TEXTO </p> actuando cada <p> como una celda.

HTML

<figure class="padre18">
   <img alt="imagen de prueba" src="../pics/articles/bgbackend.png">
   <figcaption>
	En un lugar de la Mancha, de cuyo nombre no quiero
	acordarme,  no ha mucho tiempo que vivía un
	hidalgo de los de lanza en astillero, adarga antigua,
	rocín flaco y galgo corredor. Una olla de algo
	 más vaca que carnero, salpicón las
	 más noches, duelos y quebrantos los
   </figcaption>
</figure>
		

CSS

figure.padre {
  display: table;
}
figure.padre img {
  display: table-cell;
  vertical-align: middle;
}
figure.padre figcaption {
  display: table-cell;
  vertical-align: middle;
}
			

6.3.- Centrado con padding y text-align

En este ejemplo, al redimensionar verticalmente el centrado vertical no tendrá efecto, ya que no se basa en la altura, si no en el valor del padding que es constante, es decir, del mismo valor, por los cuatro lados.

De este modo, el elemento a centrar, se verá empujado hacia el interior desde arriba, abajo, derecha e izquierda por su contenedor.

De este modo el elemnto estaría casi centrado, aunque hemos de tener en cuenta que comenzaría desde la izquierda, por eso le damos un text-align: center; y así rizamos el rizo y lo colocamos completamente en el centro.

HTML

<nav class="padre">
   <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 20</a></li>
      <li><a href="#">Item 300</a></li>
      <li><a href="#">Item 4000</a></li>
      <li><a href="#">Item 50000</a></li>
   </ul>
</nav>
		

CSS

nav.padre19 {
  padding: 3em;
}
nav.padre19 ul {
  text-align: center;
}
nav.padre19 ul li {
  display: inline-block;
}
nav.padre19 ul li a {
  background-color: #4b5ef2;
  color: #fff;
  display: block;
  padding: 10px;
}
			

7.- Centrado Horizontal y Vertical con pseudoelemento :before

7.1.- Centrado Horizontal y Vertical con pseudoelemento :before

Centrado Horizontal y Vertical con pseudoelemento :before

Michael Czernow publicó en CSS Tricks un método para centrar con el pseudoelemento :before.

Con :before lo que haremos, es crear un bloque fantasma o invisible al que le daremos una altura high: 100%; y un vertical-align: middle;, así nuestro elemento (pegado al fantasma), tendrá un centrado vertical.

Para cenrtarlo horizontalmente, nos bastará con un text-align: center;.

El margin-right: -0.25em; se utiliza para limpiar el espacio residual generado con el :before, a pesar de que su contenido está vacío: content: "";

Para evitar el margin-right negativo y corregir esto de un modo más ortodoxo, se debería dar un font-size: 0; al contenedor padre, y después declarar el font-size deseado en los elementos contenidos.

HTML

<div class="padre">
   <div class="hijo">Centrado 7.1</div>
</div>
		

CSS

.padre {
  text-align: center;
  height: 300px;
}
.padre:before {
  content: "";
  display: inline-block;
  height: 100%;
  margin-right: -0.25em;
  vertical-align: middle;
}
.hijo {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  background-color: #EDF28C;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
}
			

8.- Centrado de Elementos con flexbox

8.1.- Centrado de Elementos con flexbox

Centrado de Elementos con flexbox

Esta nueva funcionalidad de CSS3 con nombre de juguete nos va a ser de gran utilidad, aunque lamentablemente, aun no está 100% implementada en los navegadores para poder jugar con ella.

Flexbox va a suponer un auténtico cambio en el modelo de cajas, o una nueva perspectiva para trabajar con ellas.

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

El model de cajas flexibles es un tema extenso que debería ser comentado a parte. Básicamente y a modo superresumido, diremos que al declarar un elemento contenedor con display: box; haremos que sus primeros hijos, siempre que no esten posicionados con un position: absolute;, se posicionen de determinadas maneras.

Esas determinadas maneras, es decir, el cómo queremos que se coloquen, lo hacemos dándole propiedades y valores al elemento contendor, y no a sus hijos.

Estos nuevos valores y atributos CSS3 tales como flex-box: , box-orient: , box-pack o box-align son algunos de los básicos a utilizar en el sistema flex-box.

En nuestro ejemplo, todos los atributos funcionales se los daremos al contenedor padre; así display: box; hará que empiece a comportarse como tal.

box-orient: horizontal; hará que los elementos se dispongan de izquierda a derecha (con varios elementos y el valor en vertical se observaría como se colocan uno debajo del otro).

box-pack: center; hará que los elementos hijos se centren. Otras valores de box-pack son start, end, o justify. ¿Te suenan¿

Los floats ya no tendrán utilidad aquí, y el modo de maquetar los elementos será mucho más sencillo.

HTML

<div class="padre">
   <div class="hijo">Centrado 8.1</div>
</div>
		

CSS

.padre {
   /* estilos basicos */
   width: 100%;
   height: 95px;
   border: 1px solid #555;

   /* flexbox */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;

   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-pack: center;
   -moz-box-align: center;

   /* ie wtf */
   display: -ms-box;
   -ms-box-orient: horizontal;
   -ms-box-pack: center;
   -ms-box-align: center;

   display: box;
   box-orient: horizontal;
   box-pack: center;
   box-align: center;
}

.hijo {
  background-color: #d08dff;
  padding: 0.6em;
}
			

Para mayor información sobre flexbox, puedes consultar el documento CSS Flexible Box Layout Module Level 1 del consorcio W3C.

Y para profundizar y aprender flex-box de un modo menos críptico, puedes visitar este enlace en inglés sobre CSS3 Flexbox de la web Isotoma o este otro link en español muy interesante de Mozilla Network Development.

Flex-box no funciona en internet explorer, qué raro..., sin embargo, entre otras soluciones javaScript, existe un interesante plugin llamado Flexie que nos puede ayudar a torear a este querido navegador.

Flex is coming...

9.- Centrar con position: center

9.1.- Centrar con position: center y position: page

En el documento CSS Positioned Layout Module Level 3 el consorcio W3C añade dos nuevos valores a la propiedad position.

Se trata de position: center y position: page.

No sabemos si quedarán en agua de borrajas o algún día podremos utilizarla, pero según W3C funcionan así:

position: center

Con esta propiedad, la caja está explícitamente centrada respecto a su bloque de contención (su padre o ancestro más próximo que no esté en "static") y sobre ese valor se aplican los valores de desplazamiento. Se saca por completo del flujo normal. La caja con Position: Center sí crea bloque de contención (es referente) para sus descendientes posicionados (no para los fixed). El contenido de estas cajas no fluye alrededor de sus hermanos, así que como ocurre con las "relative" desplazadas, puede tapar o ser tapado por ellas. Todo depende del valor de z-index.

position: page

"Position: page" es bloque de contención para el flujo normal de sus hijos y "absolute" (pero no "fixed" u otros "page") y para los desplazamientos. En los medios paginados sólo se imprimirá en la hoja que le corresponde (en la que se genera), sin repetirse en todas como las "fixed". Y en caso de no caber en su hoja el sobrante se imprimirá en la siguiente. Sus bordes no colapsan con los de ningún otro elemento.

Lamentablemente no he encontrado ningún ejemplo y tampoco he sido capaz de hacerlo funcionar en los principales navegadores.

Personalmente creo que esperaremos bastante tiempo hasta verlos en acción, si es que los vemos.

10.- Centrado con float: positioned

10.1.- Centrado con float: positioned

Ejemplo de float: positioned con posicion de 50px desde el la parte de abajo del contenedor y 40% desde la izquierda del contenedor

Unos muchachos de Adobe junto a otros mozalbetes de Microsoft están elaborando un precioso draft o grupo de trabajo, titulado CSS Floats and Positioning Level 3 en el que añaden el valor positioned a la propiedad float de CSS.

Más vale tarde que nunca... recuerdo aquellas peléas con los floats en los comienzos...

No he encontrado ningún ejemplo al uso, así que dejo directamente la imagen del ejemplo de la W3C y su código.

CSS

#figure
{
 width: 100px;
 height: 100px;
 background-color: blue;

 float: positioned;
 position: absolute;
 bottom: 50px;
 left: 40%;
}
			

10.2.- Alternativa al centrado con float: positioned usando :before junto con float y position

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja entender que se llamaba Quejana. Pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad. Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso, que eran los más del año, se daba a leer libros de caballerías, con tanta afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la administración de su hacienda. Y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos; y de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura. Y también cuando leía: ...los altos cielos que de vuestra divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del merecimiento que merece la vuestra grandeza.

Con estas razones perdía el pobre caballero el juicio, y desvelábase por entenderlas y desentrañarles el sentido, que no se lo sacara ni las entendiera el mesmo Aristóteles, si resucitara para sólo ello. No estaba muy bien con las heridas que don Belianís daba y recebía, porque se imaginaba que, por grandes maestros que le hubiesen curado, no dejaría de tener el rostro y todo el cuerpo lleno de cicatrices y señales. Pero, con todo, alababa en su autor aquel acabar su libro con la promesa de aquella inacabable aventura, y muchas veces le vino deseo de tomar la pluma y dalle fin al pie de la letra, como allí se promete; y sin duda alguna lo hiciera, y aun saliera con ello, si otros mayores y continuos pensamientos no se lo estorbaran. Tuvo muchas veces competencia con el cura de su lugar -que era hombre docto, graduado en Sigüenza-, sobre cuál había sido mejor caballero: Palmerín de Ingalaterra o Amadís de Gaula; mas maese Nicolás, barbero del mesmo pueblo, decía que ninguno llegaba al Caballero del Febo, y que si alguno se le podía comparar, era don Galaor, hermano de Amadís de Gaula, porque tenía muy acomodada condición para todo; que no era caballero melindroso, ni tan llorón como su hermano, y que en lo de la valentía no le iba en zaga. En resolución, él se enfrascó tanto en su letura, que se le pasaban las noches leyendo de claro en claro, y los días de turbio en turbio; y así, del poco dormir y del mucho leer, se le secó el celebro, de manera que vino a perder el juicio. Llenósele la fantasía de todo aquello que leía en los libros, así de encantamentos como de pendencias, batallas, desafíos, heridas, requiebros, amores, tormentas y disparates imposibles; y asentósele de tal modo en la imaginación que era verdad toda aquella máquina de aquellas sonadas soñadas invenciones que leía, que para él no había otra historia más cierta en el mundo.

 

Para este ejemplo, necesitamos un contenedor padre con position: relative, el contenedor a centrar con position: absolute; y dos contenedores flanqueándolo con float: left y float: right.

La imagen la centramos por el viejo método de la posicion absoluta y el left: 50%; junto con su margen negativo igual a la mitad de su anchura. Para este ejemplo, la colocamos arriba, con un ligero top: 2%;

Ahora viene lo divertido con los contenedores de texto.

Flotamos los contenedores cada uno para un lado con float: left y float: right, y les damos una anchura del 49%, por si las moscas.

Aplicamos el pseudoelemento :before:
En el contenedor izquierdo, aplicamos con :before la propiedad float: right, y para el contenedor derecho usamos #izquierdo:before { float: left; }.
A ambos contenedores de texto le aplicamos el pseudoelemento before: #izquierda:before , #derecha:before y les damos propiedades de contenido vacío content: ""; una anchura igual a la mitad de la imagen central y una altura igual a la altura de la imagen con algún que otro pixel de propina. Además le deberemos dar una anchura entre un 40% y un 49%, eso va al gusto.

De ese modo obtenemos este peculiar centrado.

HTML

<div class="padre">
   <img id="logo" src="hipnosapo.png">

   <div id="left">
      <p>
        texto extenso...
     </p>
   </div>

   <div id="right">
      <p>
         texto extenso...
      </p>
   </div>

   <div class="clear">&nbsp;</div>
</div>
		

CSS

#padre {
 position: relative;
 /* ornamentales: */
 height: 23em;
 padding: o 9px;
}
#logo {
    position: absolute;
    top: 2%;
    left: 50%;
    margin-left: -125px;
}
#left , #right {
  width: 49%;
}
#left {
  float: left;
}
#right {
  float: right;
}

#left:before, #right:before {
  content: "";
  width: 125px;
  height: 252px;
  width: 40%;
}
#left:before {
  float: right;
}
#right:before {
  float: left;
}
.clear { clear: both; }
			

11.- Otros métodos para centrar

11.1.- Otros métodos para centrar

En este artículo hemos visto muchos métodos CSS para centrar contenido.

No hemos de olvidarnos que con javaScript y jQuery tenemos aun más opciones y podemos meter en la baraja factores como redimensionar el viewport, cambios de estado, etc...

También hemos de tener en cuenta que CSS3 está vivo y no está aun terminado, por lo que es posible que surjan nuevas reglas y propiedades, y lo que es más probable, otras pueden no terminar de desarrollarse.

Aun no ha llegado a nuestras manos una regla del tipo position: perfect; y algunas veces nos tendremos que complicar más o menos la faena a la hora de maquetar.

Aristóteles ya nos daba alguna pista sobre posiciones absolutas y relativas cuando dijo que la virtud está en el término medio, ahora solo nos queda elegir alguna técnica para llegar hasta él.