.tooltip { /* position the top-left corner of the element in the center of the parent */ position: absolute; top: 50%; left: 50%; /* move the (positioned) element up and left by half its own width/height */ transform: translate(-50%, -50%); } .container, .tooltip{ border: 2px solid black; padding: 10px; } .container { position: relative; width: 80vw; height: 50vh; }

 <div class="container"> <div class="tooltip">Tooltip</div> </div>

los porcentajes top e left son porcentajes de esa dimensión en el elemento principal.

Mientras que los porcentajes en translate son relativos al elemento en sí.

Esto debería centrar su información sobre herramientas

 const tooltip = document.getElementById('tooltip'); const parentWidth = tooltip.parentElement.offsetWidth; tooltip.style.left = (parentWidth - tooltip.offsetWidth) / 2 + 'px';

Editar: creo que Thomas Answer contiene la mejor manera

Bueno, depende de tu código si solo quieres hacer este css . Aquí hay varios casos que se me ocurrieron después de hacer mi investigación:

1. Si su div tiene un tamaño establecido (ancho y alto), de acuerdo con esta página , puede seguir estos pasos:

• Agregue izquierda: 50% al elemento que desea centrar. Notará que esto alinea el borde izquierdo del elemento secundario con la línea del 50% del elemento principal.
• Agregue un margen izquierdo negativo que sea igual a la mitad del ancho del elemento. Esto nos lleva de vuelta a la marca de la mitad.
• A continuación, haremos un proceso similar para el eje vertical. Agregar tope: 50% al niño
• Y luego agregue un margen superior negativo igual a la mitad de su altura.

En tu caso se ve así:

 #container { border: 1px solid gray; } #wrapper { display: inline-block; position: relative; height: fit-content; border: 1px solid red; padding: 8px; } #tooltip { width: 100px; /* could be set by % aswell */ height: 10px; border:1px solid green; position:absolute; left:50%; top:50%; margin-left: -50px; margin-top: -5px; bottom: -24px; }

 <div id="wrapper"> Trigger Content, Trigger Content, Trigger Content,Trigger Content, <div id="tooltip">Center</div> </div>

2. Si no contiene un valor establecido pero desea que esté centrado de todos modos: no estoy seguro de si es una buena manera, pero puede usar un elemento absoluto dentro del wrapper antes que cualquier otro contenido, cubriendo su padre y teniendo su valor de display como flex y que contiene justify-content: center , así como align-items: center; por ejemplo en su código:

 #container { border: 1px solid gray; } .full-flex{ width: 100%; display: flex; position: absolute; justify-content: center; align-items: center; } #wrapper { display: inline-block; position: relative; height: fit-content; border: 1px solid red; /* padding: 8px; */ /* I removed the padding so you can get a better understanding of this */ } #tooltip { border:1px solid green; }

 <div id="wrapper"> <div class="full-flex"> <div id="tooltip">Wanna be centered</div> </div> Trigger Content, Trigger Content, Trigger Content,Trigger Content, </div>