Como centralizar uma lista não ordenada sem um DIV pai

Em CSS, centralizar uma lista não ordenada (

) enquanto mantém a esquerda itens de lista alinhados podem ser desafiadores sem usar um div pai. Veja como conseguir esse efeito:

O snippet de código fornecido, com uma div pai, usa text-align: center na div e display: inline-block na ul para centralizar a lista. No entanto, este método requer um wrapper div pai.

Para centralizar uma lista não ordenada sem um div pai, propriedades CSS como margin e text-align não podem ser usadas efetivamente, pois

não tem uma largura fixa .

A solução está em configurar o

para se comportar como uma tabela usando display: table. Isso cria uma estrutura semelhante a uma tabela onde as linhas são definidas por itens de lista (
• ). Ao definir margin: 0 auto em
  , a tabela (ou seja, a lista) é centralizada em seu elemento que a contém.

  Aqui está o código CSS que atinge esse efeito:

  ul {
    display: table;
    margin: 0 auto;
  }

  Para demonstrar, aqui está um trecho de código que usa o HTML fornecido, mas sem uma div pai:

  
  
  
    
  
      
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    
  
  
  

  Este código centralizará a lista não ordenada na página, mantendo os itens da lista alinhados à esquerda.