¿Cómo puedo centrar una lista desordenada con contenido dinámico dentro de div?

Question

Estoy tratando de encontrar una manera de centrar verticalmente una lista desordenada dentro de un div. Encontré varias formas de hacer esto, sin embargo, las etiquetas li dentro de mi etiqueta ul tienen código PHP que obtiene texto de una base de datos y esto hace que la longitud del texto dentro de las etiquetas li varíe significativamente, lo que causa un tamizado vertical dentro mi div que tiene una altura y ancho fijos.

¿Cómo puedo posicionar verticalmente mi lista desordenada para que siempre esté alineada verticalmente dentro de este div?

Answer 1

Si usted está tratando de centrar horizontalmente, aquí es un poco de código que funcionará para cualquier longitud:

Vista previa: http://jsfiddle.net/Wexcode/6UtFz/

HTML:

<div> 
    <ul> 
     <li><a href="#">Element 1</a></li> 
     <li><a href="#">Element 2</a></li> 
     <li><a href="#">Element 3</a></li> 
     <li><a href="#">Element 4</a></li> 
    </ul> 
</div> 

CSS:

div { overflow: hidden; } 
ul { 
    position: relative; 
    float: left; 
    left: 50%; 
    padding: 0; 
    list-style: none; } 
li { 
    position: relative; 
    float: left; 
    right: 50%; 
    margin: 0 5px; } 

---

Para el centrado vertical, solo haga uso de la propiedad vertical-align.
Ver: http://jsfiddle.net/Wexcode/fK793/

Answer 2

Es bastante simple. Simplemente use display:table; para el div principal y display:table-cell; y vertical-align:middle; para el hijo.

violín: https://jsfiddle.net/fzfa312m/

div { 
 
    background: #f2f2f2; 
 
    width: 300px; 
 
    height: 300px; 
 
    display:table; } 
 

 
ul { 
 
    vertical-align: middle; 
 
    display: table-cell; }

<div> 
 
    <ul> 
 
     <li><a href="#">Element 1</a></li> 
 
     <li><a href="#">Element 2</a></li> 
 
     <li><a href="#">Element 3</a></li> 
 
     <li><a href="#">Element 4</a></li> 
 
    </ul> 
 
</div>