css truco para centrar horizontal y vertical

Question

Mi clase .cent es para elementos <li>. Quiero centrar el texto del <li> tanto horizontal como verticalmente. text-align:center; se ocupa del centrado horizontal, pero el centrado vertical no funciona. ¿Cuál es el truco de CSS para esto?

.cent{ 
    height:20px; 
    width:20px; 
    text-align:center; 
    vertical-align: middle; 
} 

Answer 1

Usa line-height la propiedad.

Establézcalo igual a la altura del elemento, y el texto se centrará verticalmente.

.cent{ 
    height: 20px; 
    width: 20px; 
    text-align: center; 
    /*vertical-align: middle;*/ 
    line-height: 20px; 
} 

Answer 2

¿Cuál es su elemento principal?

.parent { 
    position: relative; 
} 

.cent { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -10px; 
    margin-top: -10px; 
} 

O si desea vertical-align: middle a trabajar, ponga display: table-cell.

Answer 3

intenta establecer el estilo de etiqueta etiquetas li, margen y el relleno son le ayudará a

igual,

# set default 
li 
    { 
    margin: 0; 
    padding: 0; 
    } 

después de escribir el estilo para su ciento de clase, se afecta la etiqueta li correctamente