CSS por fin agrega el "centrado vertical" en 2024

• CSS por fin incorpora align-content al layout por defecto, permitiendo el alineado vertical con una sola propiedad de CSS
  • Versiones compatibles: Chrome 123, Firefox 125, Safari 17.4
• Hasta ahora, align-content no funcionaba en el layout básico (flow), así que había que cambiar a flexbox o grid
  • En 2024, los navegadores finalmente implementaron align-content en el layout Flow
  • Ahora se puede alinear usando solo 1 propiedad de CSS, sin flexbox ni grid
  • Por lo tanto, ya no hace falta envolver el contenido en un div

Historia del alineado vertical

• Durante mucho tiempo no hubo una forma simple de hacer alineado vertical en el navegador

Método 1: celda de tabla

• Sanity (¿estamos bien de la cabeza?): ★★★☆☆
• Hay 4 layouts principales: flow (predeterminado), table, flexbox y grid, y la alineación del contenido cambia según el layout
• Como flexbox y grid se agregaron más tarde, al principio se usaba table

<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  

Método 2: posición absoluta

• Sanity: ☆☆☆☆☆
• Como el layout flow no ayudaba, se buscaba una vuelta usando posición absoluta

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  

Método 3: contenido inline

• Sanity: ☆☆☆☆☆
• El layout flow no ayuda con la alineación del contenido. Sí permite alineado vertical dentro de una línea
• Entonces, ¿qué pasa si hacemos una línea del alto del contenedor?

<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}  

• Es fácil que esto termine poniéndose raro

Método 4: flexbox de una sola línea

• Sanity: ★★★☆☆
• Flexbox empezó a usarse de forma generalizada 20 años después del nacimiento de la web
• En modo de una sola línea (el predeterminado), la línea ocupa el espacio vertical y align-items alinea los elementos dentro de esa línea

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  

• O también se puede poner la línea en vertical y usar justify-content para alinear los elementos

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  

Método 5: flexbox de varias líneas

• Sanity: ★★★☆☆
• En flexbox de varias líneas, se pueden alinear las líneas con align-content

<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  

Método 6: contenido grid

• Sanity: ★★★★☆
• Como grid apareció todavía después, la alineación se volvió un poco más simple

<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  

Método 7: celda grid

• Sanity: ★★★★☆
• align-content alinea las celdas dentro del contenedor, y align-items alinea el contenido dentro de las celdas

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  

Método 8: márgenes auto

• Sanity: ★★★☆☆
• En el layout flow, margin:auto centra horizontalmente pero no verticalmente
• Flexbox y grid no comparten esa inconsistencia

<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  

Método 9: este artículo en 2024

• Sanity: ★★★★★
• Los navegadores debieron haber agregado esto desde el principio

<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  

[tobesimple7]

Oh~ qué buena función~~

[seunggi]

Lo más difícil de la informática: centrar algo

https://tonsky.me/blog/centering/

[mongsilsushi]

¡Por fin!

[sgwanlee]

¿Ahora CSS se volvió demasiado fácil? jajaja

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

oh por Dios, borde de queso

[shpkc]

¡Por fin!

[halfenif]

¡Llegó tarde! ¡Llegó tarde! ¡Llegó tarde!

[uoayop]

Por fin

[aer0700]

Qué alegría

[koyokr]

jajaja

[nemorize]

a-men

[carnoxen]

¿Existe el riesgo de que los sitios web existentes queden con la estructura desordenada debido a este cambio?

[bluekai17]

A mí también me da curiosidad esta parte.

[ng0301]

¡Por fin!

[yatmak]

Por fin ha llegado la era de la Web 3.0.

[plaaat0102]

Los comentarios están llenos de alegría jajajaja..

[godppun]

De verdad, por fin...

[kangkung9225]

Oh...? ¿Hay que hacerlo? jaja..

[qurare]

Por fin

[savvykang]

¡GUA!

[joyfui]

¡Guau!!!

[mkyoon]

¡Qué felicidad!

[wedding]

Como desarrollo principalmente apps, cuando ayudo con desarrollo web buscaba sin pensarlo y usaba flexbox, asumiendo que eso era centrado... pero resulta que hasta ahora no existía. Qué impacto.....

[illiil1lii]

¡Muya-ho!

[huiya]

¡Por fin!

[tjddnjsjo]

¡Qué alegría!

[pkj3186]

¡Por fin!