Método 3: Centrado Vertical

Método 3:

El código CSS de este bloque es el siguiente:

#contenedor {
position : relative;
border : 1px solid navy;
width : 500px;
height : 500px;
margin : 10% auto;
padding : 1em;
background : rgb(240, 255, 255);
}
#contenido {
top : 50%;
margin-top : -100px;
position : absolute;
width : 200px;
height : 200px;
border : 1px solid black;
background : #ffd12e;
}

Probá aumentar el tamaño del contenedor:
- Aumentar
- Disminuir

Puede verse cómo el contenido se mantiene centrado aunque cambien las dimensiones del bloque padre. Este método permite un control total en las medidas del contenedor y del contenido.