como centrar dos elementos html uno encima de otro con css in javascript

<div class="container">
   <div class="element1">Elemento 1</div>
   <div class="element2">Elemento 2</div>
</div>
115 chars
5 lines

/* Estilos para el contenedor */
.container {
   display: flex; /*display:flex para alinear los elementos */
   height: 100vh; /*altura del 100% de la pantalla */
   justify-content: center; /*centrar horizontalmente */
   align-items: center; /*centrar verticalmente */
   flex-direction: column; /*ordenarlos uno encima del otro vertically */
}

/* Estilos para el primer elemento */
.element1 {
   background-color: #ddd;
   width: 200px;
   height: 50px;
   margin-bottom: 10px; /*separación entre los elementos */
}

/* Estilos para el segundo elemento */
.element2 {
   background-color: #ccc;
   width: 150px;
   height: 35px;
}
636 chars
24 lines

/* Opcionalmente, si necesitas agregar estilos a los elementos dinámicamente en JavaScript, aquí te dejo un ejemplo: */

// Seleccionamos los elementos
const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');

// Agregamos estilos dinámicamente
element1.style.backgroundColor = 'blue';
element1.style.color = 'white';
element2.style.backgroundColor = 'green';
element2.style.color = 'white';
443 chars
12 lines