Tengo un diseño de página con una barra lateral junto con un div de contenido principal. En la mitad de la página, tengo un div (padre) dentro de un div (hijo). El div secundario debe estar centrado horizontalmente en relación con la pantalla en lugar del principal.
<div class="sidebar"></div> <div class="main-content"> <div class="parent"> <div class="child"></div> <div class="other-stuff"></div> </div> </div> <style> .parent{ width: 100px; } .child{ width: 200px; } </style>Mi primer pensamiento fue usar el posicionamiento absoluto con algo como esto:
.child{ position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; }El problema que enfrenté aquí fue que tuve que compensar el espacio adicional debido a que el niño fue sacado del flujo de documentos. "Otras cosas" quería subir para llenar el vacío dejado atrás.
¿Hay una mejor manera de lograr esto más allá de simplemente empujar el div con un posicionamiento absoluto y agregar un margen/relleno adicional para compensar el espacio para que no aparezca el contenido inferior?
Estoy abierto a abandonar el posicionamiento absoluto, eso fue lo primero que me vino a la mente.
Puede usar un flexbox para colocar varios elementos en un contenedor y eliminar a los elementos secundarios del div principal para que no se vea afectado por el posicionamiento que haga con eso.
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; } .parent { border: 1px solid black; width: 100px; height: fit-content; } .container { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; gap: 2px; } .child { display: block; border: 1px solid black; width: 200px; height: fit-content; } .other-stuff { display: block; border: 1px solid black; width: 200px; height: fit-content; } <div class="sidebar"></div> <div class="main-content"> <div class="parent"> I'm the Parent </div> <div class="container"> <div class="child">I'm the Child</div> <div class="other-stuff">I'm the Other Stuff</div> </div> </div>