Tengo dos divs: imagen_cancelando e imagen_cargando.
Deseo que imagen_cancelando esté en mitad de la pantalla, centrado tanto vertical como horizontalmente, y que imagen_cargando esté debajo de imagen_cancelando, también centrado horizontalmente, con una separación de 5 saltos de línea respecto al primer div
.
¿Por qué no se centran los elementos?
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
}
#imagen_cancelando{
position: absolute;
top: 50%;
left: 50%;
}
#imagen_cancelando + #imagen_cargando{
margin-top: 5em;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cancelando pago</title>
<link rel="stylesheet" href="css/cancelando.css">
</head>
<body background="imagenes/fondo_campo4.jpg">
<div id="imagen_cancelando">
<img src="imagenes/cancelado.png" alt="cancelando"/>
</div>
<div id="imagen_cargando">
<center><img src="imagenes/cargando.gif" alt="cargando" height="20px" width="20px"/></center>
</div>
</body>
</html>