CSS FLEX Y GRID

CSS Flexbox y CSS Grid es el futuro de los layouts en CSS, ya que nos permiten de una forma bastante facil distribuir los elementos de nuestro componente como queramos, de forma que centrar un elemento no será un problema y podremos crear layouts complejos

how the f i can center diz
FLEX

Los elementos dentro de un flexbox se situan en una dimension, nos viene bien para cuando no conocemos el tamaño de los elementos hijos

con flex-direction podemos establecer la forma en la que queramos que se distribuyan los elementos


  • flex-direction: row Los elementos se alinean de forma horizontal
  • flex-direction: row-reverse Los elementos se alinean de forma horizontal (pero invertidos)
  • flex-direction: column Los elementos se alinean de forma vertical
  • flex-direction: column-reverse Los elementos se alinean de forma vertical (pero invertidos)

See the Pen Flex Direction by osmak (@osmak) on CodePen.

GRID

A diferencia del flexbox, con display: grid podemos distribuir los elementos en dos dimensiones permitiendonos elegir el tamaño de cada fila y columna, gracias a esto podemos hacer diseños responsive sin necesidad de usar media queries

con flex-direction podemos establecer la forma en la que queramos que se distribuyan los elementos


See the Pen Grid by osmak (@osmak) on CodePen.

Entonces... ¿Cómo centro un elemento?

Podemos centrar un elemento de diferentes formas, no tenemos por que usar un flexbox o un grid, pero para hacerlo con esto, nos podemos ayudar con las propiedades justify-content y align-items, si estamos usando un flex o un grid con un ancho y un alto preestablecido, o simplemente usar place-content: center en un grid

how the f i can center diz

See the Pen how to center by osmak (@osmak) on CodePen.