Cuando se trata de centrar las cosas en el diseño web, cuanta más información tenga sobre el elemento que se está centrando y su elemento principal, más fácil será. ¿Y qué pasa si no sabes nada? Todavía es algo factible.
No demasiado difícil: Niño conocido
Si conoce la altura y el ancho del elemento que se va a centrar y su elemento principal (y esas medidas no cambiarán, es decir, no el entorno de ancho fluido) una forma infalible de centrar el elemento es simplemente colocarlo en posición absoluta con valores de píxeles, por lo que parece perfectamente centrado.
Digamos que conoce el ancho y alto exactos del elemento que está centrando, pero el elemento padre puede cambiar en alto y ancho.
Posicione absolutamente el elemento para que esté centrado y establezca los valores superior e izquierdo al 50% y los valores del margen superior e izquierdo a la mitad negativa de la altura y el ancho de los elementos. Eso fue un tornado de lengua, así que mira esto.
Más difícil: niño desconocido
Lo difícil viene cuando no conoce las dimensiones del elemento que se va a centrar.
¿Qué sabemos? ¡Nada! Cuando lo sabemos ¡Ahora!
La forma más grosera de manejarlo son literalmente tablas:
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Unknown stuff to be centered.
</td>
</tr>
</table>Si está preocupado por la semántica de eso, puede intentar hacer coincidir su contenido.
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>Y obtenga el mismo resultado que las tablas como:
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}Las tablas CSS pueden ser adecuadas para ti. O puede que no. Las tablas se renderizan de manera un poco diferente a como lo hace un div normal a nivel de bloque. Por ejemplo, lo del ancho del 100%. Una tabla solo se estirará para ser tan ancha como sea necesario para el contenido dentro de ella, mientras que, por defecto, un elemento de nivel de bloque se expandirá al ancho de su padre automáticamente. Además, Dios lo ayude si necesita otro contenido dentro de ese div que desea colocar o que no actúe como una celda de tabla.
Michał Czernow me escribió con una técnica alternativa que es extremadamente inteligente y logra lo mismo. Si configuramos un elemento “fantasma” dentro del padre que tiene 100% de altura, entonces vertical-align: middle tanto eso como el elemento a centrar, obtenemos el mismo efecto.
Ves lo que hicimos allí?
Entonces, ¿ese elemento fantasma debe ser un elemento no semántico? No, puede ser un pseudo elemento.
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}Me gustaría decirles que la técnica del elemento fantasma es mucho mejor y debería ser la técnica de centrado de referencia de todas las edades. Pero en realidad, es casi lo mismo que el truco de la mesa. El soporte del navegador para esto es esencialmente todo e IE 8+. IE 7 no admite pseudo elementos. Pero tampoco admite tablas CSS, por lo que es un caballo cada uno. Si IE