Centrado: La forma más nueva y genial frente a la forma más antigua y genial | Programar Plus

Esta no es una guía completa para centrar las cosas. ¡Tenemos eso!

Esta es solo una pequeña observación sobre lo viejo y lo nuevo. Una de las cosas más complicadas relacionadas con el centrado en CSS es cuando necesitas centrar tanto vertical como horizontalmente y no sabes el ancho o el alto de lo que estás centrando. El centrado vertical es el más complicado de los dos.

Lo crea o no, había una forma de hacerlo incluso en IE 8. El truco estaba en aprovechar display: table; y que las mesas tenían esta otra propiedad, vertical-align: middle;, que podría utilizarse para el centrado vertical.

Diga que todo lo que quería hacer era centrar una oración perfectamente en el medio de la ventana del navegador:

...
<body>
  <span>
    Centered vertically and horizontally.
  </span>
</body>
...

Podrías hacerlo así:

html, body {
  margin: 0;
  height: 100%;
}
body {
  display: table;
  width: 100%;
}
body > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Ese podría ser el truco más antiguo del Libro de CSS Centering. Aquí está trabajando en IE 8:

Hoy tenemos métodos de diseño más modernos. Flexbox! Cuadrícula CSS!

Aquí está logrando lo mismo con los métodos más modernos disponibles:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

¡Ni siquiera necesitamos tocar el tramo allí! De hecho, esto es tan vanguardista que Microsoft Edge, que admite la cuadrícula CSS, no admite place-items aún. tendrías que usar align-items: center; y justify-content: center; en lugar de.

Siempre en movimiento.

(Visited 8 times, 1 visits today)