centro de una etiqueta H1 dentro de un DIV

Question

Tengo el siguiente DIV dentro de un cuerpo de la etiqueta:

<div id="AlertDiv"><h1>Yes</h1></div> 

Y estos son sus clases CSS:

#AlertDiv { 
    position:absolute; 
    height: 51px; 
    left: 365px; 
    top: 198px; 
    width: 62px; 
    background-color:black; 
    color:white; 
} 

#AlertDiv h1{ 
    margin:auto; 
    vertical-align:middle; 
} 

¿Cómo puedo alinear verticalmente y horizontalmente H1 interior DIV?

AlertDiv será más grande que H1.

Answer 1

Puede agregar line-height:51px al #AlertDiv h1 si sabe que solo va a ser una sola línea. También agregue text-align:center a #AlertDiv.

#AlertDiv { 
    top:198px; 
    left:365px; 
    width:62px; 
    height:51px; 
    color:white; 
    position:absolute; 
    text-align:center; 
    background-color:black; 
} 

#AlertDiv h1 { 
    margin:auto; 
    line-height:51px; 
    vertical-align:middle; 
} 

La demostración a continuación también se utiliza márgenes negativos para mantener el #AlertDiv centrado en ambos ejes, incluso cuando se cambia el tamaño de la ventana.

Demostración: jsfiddle.net/KaXY5

Answer 2

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;"> 
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1> 
</div> 

Puede probar el código aquí:

http://htmledit.squarefree.com/

Answer 3

Se podría agregar relleno a la h1:

#AlertDiv h1 { 
    padding:15px 18px; 
} 

Answer 4

Comienza un jsFiddlehere.

Parece que la alineación horizontal funciona con text-align : center. Todavía estoy tratando de alinear la vertical para trabajar; podría tener que usar el posicionamiento absolute y algo así como top: 50% o un padding precalculado desde la parte superior.

Answer 5

Hay una nueva forma de usar transformadas. Aplicar esto al elemento al centro. Empuja hacia abajo la mitad de la altura del contenedor y luego "corrige" la mitad de la altura del elemento.

position: relative; 
top: 50%; 
transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 

Funciona la mayor parte del tiempo. Tuve un problema donde estaba div en un div en un li. El elemento de la lista tenía una altura establecida y el exterior div s componía 3 columnas (cimentación). Los divs de la 2ª y la 3ª columna contenían imágenes, y se centraron muy bien con esta técnica, sin embargo, el encabezado de la primera columna necesitaba un div envolvente con un conjunto de altura explícito.

Ahora, ¿alguien sabe si las personas de CSS están trabajando en una forma de alinear cosas, como, fácilmente? Al ver que su 2014 e incluso algunos de mis amigos están usando Internet regularmente, me preguntaba si alguien había considerado que el centrado sería una característica útil de diseño todavía. ¿Solo nosotros entonces?

Answer 6

Puede usar display: table-cell para representar div como una celda de tabla y luego usar vertical-align como lo haría en una celda de tabla normal.

#AlertDiv { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Puedes probarlo aquí: http://jsfiddle.net/KaXY5/424/

Answer 7

En la etiqueta hx

width: 100px; 
margin-left: auto; 
margin-right: auto;