Margen

En algunas etiquetas (como body, ul, etc.) el navegador establece márgenes por defecto. Tenerlo en cuenta.

margin: 0 auto; vs. text-align: center;

text-align: center; Funciona en elementos en bloque (div, p, article, ul, li, header, nav, table, etc. )

margin: auto; 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. margin: auto; 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 block, y este debe tener una medida absoluta (ej. width: 200px;), 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 la mejor opción es Flexbox.

Ver ejemplo aquí