Lo único que necesitarías es indicar a tu .flex-container
que su eje principal pase de ser el eje X para volverse el eje Y. Puedes hacer esto usando la propiedad flex-direction: column
.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Añadido para solución */
}
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
#div2 {
width: 250px;
height: 250px;
background-color: gold;
border: 1px solid #333;
border-radius: 20px;
}
<body class="flex-container">
<div id="div1"></div>
<div id="div2"></div>
</body>
Edit:
Releyendo la pregunta creo que lo que querías era poner el <div class='div2'>
en el interior de <div class='div1'>
. Para ello puedes hacer que el contenedor padre de ambos <div>
tenga un position: relative
para que haga de referencia a <div class='div2'>
cuando le pongas un position: absolute
.
El posicionamiento absoluto saca a un elemento del flujo normal de la página, que entre otras cosas provoca que dicho elemento no tenga en cuenta al resto de elementos ni estos le tengan en cuenta a él. De esta manera puedes hacer que un elemento esté sobre otro.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Añadido para solución */
}
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
#div2 {
width: 250px;
height: 250px;
background-color: gold;
border: 1px solid #333;
border-radius: 20px;
position: absolute; /* Añadido para solución */
}
<body class="flex-container">
<div id="div1"></div>
<div id="div2"></div>
</body>
<head> <style> .flex-container{ display: flex; justify-content: center; align-items: center; } #div1{ width: 500px; height: 500px; background-color: red; } #div2{ width: 250px; height: 250px; background-color: gold; border: 1px solid #333; border-radius: 20px; } </style> </head> <body class="flex-container"> <div id="div1"></div> <div id="div2"></div> </body> </html>