¿Cuál es la diferencia de <strong>margin: 0;</strong> auto a <strong>text-align: center;</strong>?

El

alinea al centro lo que dentro de un <div>, por ejemplo, mientras que el pone al div como tal en el centro de manera horizontal.

text-align: center; aplicado a un elemento no inline hace que todo su contenido inline se centre.

margin: auto; hace que un elemento no inline (podría ser block, flex, etc) con un ancho definido tenga márgenes automático (esto incluye derecha e izquierda) lo cual produce que el bloque se centre.

Hola, sé que parecen lo mismo, pero realmente no lo son,

, como su nombre lo indica, está pensando para centrar texto específicamente, aunque también puedes manipular ciertos elementos para que funcione con ellos, aún sin ser texto, usualmente, este funciona con elementos de tipo (El texto es de tipo inline, por eso funciona con textos)

, aunque centra los elementos, no está pensando para centrarlos, de hecho, como su nombre lo dice, lo que hace es agregar un margen de manera automática. es un "hack" que usamos para centrar cierto tipo de elementos, porque realmente no funciona con todos, para que funcione, el elemento que quieres centrar debe ser de tipo , y este debe tener una medida absoluta, solo de esa manera el navegador es capaz de calcular los márgenes de izquierda y derecha para que se pueda centrar.

Aunque eran buenos trucos, hoy en día la verdad es que ya no es recomendable usar ni uno ni otro, hoy en día existe una cosa maravillosa llamada "flexbox":D

te sirve para centrar el contenido del elemento al que se lo pones, y te centra el elemento (contenedor) al que se lo pones.