Cómo centrar una lista desordenada sin un DIV principal

En CSS, centrar una lista desordenada (

) mientras se mantiene la izquierda Los elementos de la lista alineados pueden ser un desafío sin utilizar un div principal. Aquí se explica cómo lograr este efecto:

El fragmento de código proporcionado, con un div principal, usa text-align: center en el div y display: inline-block en ul para centrar la lista. Sin embargo, este método requiere un contenedor div principal.

Para centrar una lista desordenada sin un div principal, las propiedades CSS como margin y text-align no se pueden usar de manera efectiva ya que

no tiene un ancho fijo .

La solución radica en configurar

para que se comporte como una tabla usando display:table. Esto crea una estructura similar a una tabla donde las filas se definen mediante elementos de la lista (
• ). Al configurar margin: 0 auto en
  , la tabla (es decir, la lista) se centra dentro de su elemento contenedor.

  Aquí está el código CSS que logra este efecto:

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

  Para demostrarlo, aquí hay un fragmento de código que utiliza el HTML proporcionado pero sin un div principal:

  
  
  
    
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    

  Este código centrará la lista desordenada en la página, manteniendo los elementos de la lista alineados a la izquierda.