TL;DR: Podemos centrar un elemento absolutamente posicionado en tres líneas de CSS. ¡Funciona en todos los navegadores!
.element {
position: absolute;
place-self: center;
inset: 0;
}¿Por qué? Bueno, eso requiere una respuesta más larga.
En los últimos años, CSS ha traído muchas características nuevas que no necesariamente nos permiten hacer cosas nuevas, pero ciertamente las hacen más fáciles y sencillas. Por ejemplo, ya no tenemos que codificar índices:
<ul style="--t: 8">
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<!-- ... -->
<li style="--i: 8"></li>
</ul>En cambio, todo se reduce a sibling-index() y sibling-count() Función. Hay muchos ejemplos de este tipo recientemente.
Aún así, hay una pequeña tarea que parece la misma que hemos estado haciendo durante décadas: Centrar elementos absolutamente posicionadosnormalmente lo implementamos así:
.element {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}Movemos la esquina superior izquierda del elemento al centro y luego lo trasladamos un 50% para centrarlo.
No hay nada malo en este enfoque: lo hemos estado haciendo durante décadas. pero todavía se siente como viejo camino. sí o no única manera? Bueno, hay otra forma poco conocida en todos los navegadores de no sólo centrar sino también colocar fácilmente cualquier elemento en una posición absoluta. Lo mejor de todo es que reutiliza algo familiar. align-self y justify-self característica.
Resulta que estas propiedades (y sus place-self Shorthand) ahora funciona para elementos absolutamente posicionados. Sin embargo, si intentamos usarlos tal como están, notaremos que nuestros elementos ni siquiera se inmutan.
/* Doesn't work!! */
.element {
position: absolute;
place-self: center;
}Entonces, ¿cómo hacer? align-self y justify-self ¿Se aplica a elementos absolutos? Obviamente deberían alinear el elemento, eso es cierto, pero específicamente lo alinean dentro de él. Insertar bloque contenedor modificado (IMCB). Está bien… pero ¿qué es IMCB?
Imaginemos que establecemos el elemento absoluto width y height llegar 100%. Incluso si la posición del elemento es absoluta, ciertamente no crecerá infinitamente, sino que se llamará Contiene bloque.
El bloque contenedor tiene un nuevo ancestro más cercano. contexto de apilamiento. Por defecto, es html elemento.
Podemos modificar el bloque contenedor usando el siguiente comando inset propiedades (especialmente top, right, bottomy left). una vez pensé inset El atributo arregla las esquinas del elemento (incluso lo dije hace unos segundos), pero detrás de escena en realidad estamos arreglando el IMCB. límite.
Por defecto, el IMCB tiene el mismo tamaño que el elemento. Así que antes, align-self y justify-self Intentamos concentrar elementos dentro de nosotros mismos, pero no logramos nada. Luego, nuestro paso final es configurar el IMCB para que sea el mismo que el bloque contenedor.
.element {
position: absolute;
place-self: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
}O usar su inset taquigrafía:
.element {
position: absolute;
place-self: center;
inset: 0;
}¡Solo tres líneas! Una victoria para los nerds de CSS. Es cierto que podría estar haciendo trampa porque, a la antigua usanza, también podríamos usar inset properties y redúzcalo a tres líneas, pero… ignoremos ese hecho por ahora.
No estamos limitados a elementos centrados porque todos los demás elementos align-self y justify-self La posición funciona muy bien. Esto proporciona una forma más idiomática de posicionar elementos absolutos.
pista: Si queremos un espacio entre un elemento absolutamente posicionado y su bloque contenedor, podemos agregar un margin al elemento o contenedor de configuración inset al espaciamiento requerido.
¿Qué es lo mejor que revisé? canioaunque inicialmente Safari no parecía admitirlo, pero después de probarlo, ¡parece funcionar en todos los navegadores!
