Quais são as formas de centralizar elementos usando a propriedade inline-block?

Para centralizar elementos com display: inline-block:

1. Defina text-align: center; no elemento pai. Os elementos filhos inline-block serão alinhados ao centro como texto.

   .parent {
     text-align: center; /* Centraliza elementos filhos inline-block */
   }
   
   .child {
     display: inline-block;
   }
   

2. O uso de margin: 0 auto; no próprio elemento inline-block não funciona para centralização horizontal. Este método é aplicável a elementos de bloco com largura fixa.

3. Elemento de bloco aninhado: Envolva o elemento inline-block em um elemento de bloco ao qual atribua uma largura fixa (se necessário) e margin: 0 auto;.

   <div class="wrapper">
     <div class="centered-block">
       <span class="inline-block-element">
          Conteúdo
       </span>
     </div>
   </div>
   

   .wrapper {
     /* Não é necessário estilos se o wrapper for apenas um contêiner */
   }
   
   .centered-block {
     display: block; /* É importante que seja um elemento de bloco */
     width: fit-content; /* Ou uma largura fixa */
     margin: 0 auto; /* Centraliza o elemento de bloco */
   }
   
   .inline-block-element {
     display: inline-block;
     /* Outros estilos */
   }
   

Assim, a maneira mais simples e comum de centralizar vários elementos inline-block horizontalmente é usar text-align: center; no seu contêiner pai. Para centralizar um único elemento inline-block, pode ser necessário envolvê-lo em um elemento de bloco com margin: 0 auto;.