Olá, Elmar! Tudo bem?
Entendo sua preocupação, e é complicado afirmar sem sombra de dúvidas ser a melhor porque depende do contexto.
Mas, eu diria que há três maneiras de alinhar algo em CSS de forma "limpa":
- Usando
margin como auto; - Usando Flexbox;
- Usar o
text-align: center.
Logo de cara, temos o Flexbox, que é algo que o curso não cobriu. Mas basicamente, usando o Flexbox em algum container, seu layout pode ficar mais fluído, e você pode inclusive escolher como organizar seu espaçamento entre itens de um Flexbox.
Você vai ver muito o uso dessa solução em front-end, e ela é excelente. Porém, ela pode ser muito exagerada quando se quer uma solução simples. Isso porque precisamos definir como flex o display e depois definir o comportamento. Quando é necessária uma solução mais refinada, sem sombra de dúvidas Flexbox é a única resposta certa para a melhor maneira de centralizar.
O text-align: center é muito bom, mas o próprio o nome pode confundir, além das suas limitações. Ele é menos usado, e mais específico.
No fim das contas, o margin: auto é a forma rápida de centralizar uma div com CSS. Veja que é apenas uma linha, e de total responsabilidade do navegador (é ele que irá calcular a margem necessária). Talvez a legibilidade dele não seja ideal (pois não diz explicitamente que é uma centralização), mas o mercado já é muito acostumado com essa solução.
Resumindo, eu diria que margin: auto é a melhor solução por convenção. É como os desenvolvedores se acostumaram a fazer.
A outra maneira muito utilizada é com o Flexbox, como eu disse, mas geralmente nesses casos a motivação é maior do que centralizar um item horizontalmente, justamente porque o Flexbox é muito mais poderoso. Você pode ver mais sobre no nosso curso de Flexbox.
Infelizmente não encontrei muito conteúdo sobre como tomar essa decisão, mas tem esses dois artigos em inglês:
Espero ter ajudado, e bons estudos! Qualquer coisa, estamos por aqui!
