centrar un div dentro de otro div sin modificar los elementos hijos in javascript

Puedes centrar un div dentro de otro div utilizando CSS con la propiedad flexbox. Aquí te muestro un ejemplo:

HTML:

<div class="contenedor">
   <div class="centrado">
      <p>Contenido del div centrado</p>
   </div>
</div>
108 chars
6 lines

CSS:

.contenedor {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   /*La altura del div contenedor debe ser definida para que el div centrado sea visible*/
}

.centrado {
   background-color: #f0f0f0;
   padding: 20px;
   /*Ancho del div centrado*/
   width: 50%;
}
303 chars
15 lines

En este ejemplo, el div contenedor utiliza la propiedad display: flex para centrar vertical y horizontalmente el div centrado utilizando justify-content: center y align-items: center. Luego, el div centrado tiene un tamaño definido con la propiedad width: 50% (puede ser cualquier valor) y se agrega un fondo y un padding para poder visualizar mejor el contenido del div.

Esto no afecta al contenido del div centrado y funciona sin necesidad de modificar nada en el mismo.

Espero que te sea útil!

related categories

gistlibby LogSnag