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

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 horizontalflex-direction: row-reverse
Los elementos se alinean de forma horizontal (pero invertidos)flex-direction: column
Los elementos se alinean de forma verticalflex-direction: column-reverse
Los elementos se alinean de forma vertical (pero invertidos)
See the Pen Flex Direction by osmak (@osmak) on CodePen.
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
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

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