Cómo alinear verticalmente una posición en el centro: elemento relativo

Question

Estoy probando algunos CSS básicos hoy y tropecé con un problema. Espero que alguien pueda ayudarme con eso.

¿Cómo alineo verticalmente el centro del contenedor principal al lienzo que tiene una posición: con respecto a él? El contenedor principal tiene un elemento secundario con posición: absoluto. El elemento secundario se ha ubicado en el centro del contenedor principal.

He creado un JSFiddle para esto. http://jsfiddle.net/exmRf/

Cheers, Venn.

Answer 1

Uno es para envolver su .container con dos envolturas; dé el primero display: table; y height: 100%; width: 100%; y el segundo display: table-cell; y vertical-align: middle;. También asegúrese de que su body y html tengan altura completa.

Aquí hay una pequeña demostración funcional: little link.

Otro método es aplicar top: 50%; a su .container y margin-top: -150px; (300px/2 = 150px). (Tenga en cuenta que este método requiere que sepa la altura exacta de su contenedor, por lo que podría no ser exactamente lo que quiere, ¡pero podría ser así!). Una pequeña demostración funcional de este último método: another little link.

¡Espero que haya sido útil!

Answer 2

Demo

Dale a tu itemleft 50% y top 50% y la mitad del margen izquierdo de la anchura o media margen superior de la parte superior

Ahora utilizado para este css

.container{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    margin:auto; 
} 

.item{ 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    left:50%; 
    top:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
} 

Demo

si utilizó no coloque que utiliza para esta solución http://jsfiddle.net/exmRf/16/