Q:

Melhor centralizar por margin:auto ou text-align:center?

Buscando boas práticas em HTML, qual a melhor forma de centralizar?
Vejo que consigo centralizar o menu de uma página por ambas as opções, porém fico na duvida de qual a melhor forma e também de qual é a forma correta ao invés de apenas usar uma que funcione sendo errada em alguns casos.
Vejamos o seguinte código:

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px; }

.menu { list-style: none;
     margin: auto;
        width: 200px; }

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
 <li class="menu-item"><a href="">Home</a></li>
 <li class="menu-item"><a href="">Work</a></li>
 <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

Só consigo centralizar o menu por margin: auto; quando defino uma largura da classe menu e isso em alguns casos pode me fazer ter problemas quando os itens excedem esse tamanho, basta mudar o width: 200px; para width: 100px; que os itens ficam sobrepondo outros.
Já quando defino a classe menu sem width posso centralizar o menu definindo um text-align: center; no seletor da tag superior, que no caso é o id #container. Fazendo isso eu consigo resolver o problema da quantidade de itens da lista que pode mudar e até ficar com tamanhos diferentes dependendo das modificações que precise fazer, mas ainda assim fico me perguntando se essa é a forma correta de fazer o alinhamento no centro.

* { margin: 0; padding: 0; }

#container { background-color: lightblue;
             height: 200px;
         text-align: center; } /* adicionado */

.menu { list-style: none;}
/* removido width: 200px e margin: auto */

.menu-item { display: inline-block; }

a { padding: 10px;
    background-color: green; }
<div id="container">
  <ul class="menu">
 <li class="menu-item"><a href="">Home</a></li>
 <li class="menu-item"><a href="">Work</a></li>
 <li class="menu-item"><a href="">Contact</a></li>
  </ul>
</div>

A:

De acordo com a W3C

The CSS margin properties are used to generate space around elements.
  Segue o link

Ou seja, a função da propriedade "margin" é definir espaço em volta dos elementos.
Já a propriedade "text-align":

The text-align property specifies the horizontal alignment of text in
  an element.
  Segue o link

Resumindo, serve para alinhar texto horizontalmente.
Boas praticas é utilizar um recurso de acordo com sua função. Se teu objetivo é centralizar texto. Deve utilizar "text-algin". Caso contrario, utilize "margin". 

