HTML {
height:100%; /* Le permite al navegador calcular el alto total */
overflow:hidden; /* Evita que aparezcan barras de scroll al hacer la ventana muy pequeña */
}

BODY {
height:100%; /* Le permite al navegador calcular el alto total */
margin:0px; /* Elimina los márgenes */
}

.separador {
height:50%; /* ocupa el 50% de la pantalla */
background-color:silver;
}

.cuadrado {
height:480px; width:774px; /* La altura del div debe ser fija */
margin:position:absolute; top:50%; left:50%;margin-top:-240px; margin-top:-240px; margin-left:-387px;  /* Desplazo 1/2 de la altura de la caja hacia arriba y centra horizontalmente */
border:solid red 1px;
text-align:center;
}