To ensure a child element stays centered on the screen while its parent element is visible using CSS, you need to employ a combination of CSS properties and perhaps a bit of JavaScript for dynamic positioning.
CSS for Centering:
Start by ensuring that your child element can be centered using standard CSS techniques. Here’s an example:

css
.parent {
position: relative; / Creates a positioning context for the child /
height: 2000px; / Example height: adjust according to your needs /
width: 100%; / Make sure this fits your design /
}

.child {
position: fixed; / Fixed position to keep it centrally aligned /
top: 50%; / Centers vertically /
left: 50%; / Centers horizontally /
transform: translate(-50%, -50%); / Adjusts by half the width and height /
/ you might also want z-index to ensure it’s on top /
z-index: 1000;
}

This CSS will center the child element on the screen even as you scroll, because position: fixed; keeps it in place relative to the viewport.
JavaScript for Visibility:
To ensure the child is only displayed when the parent is visible on the screen, JavaScript can be used to track the visibility of the parent element. The Intersection Observer API is perfect for this.

Here’s a simple way to do it:

javascript
const parent = document.querySelector(‘.parent’);
const child = document.querySelector(‘.child’);

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
child.style.display = ‘block’; // Show child
} else {
child.style.display = ‘none’; // Hide child when parent is not visible
}
});
}, { threshold: [0] });

observer.observe(parent);

This code snippet creates an IntersectionObserver that watches the parent element. When the parent is in the viewport, the child element is displayed; otherwise, it’s hidden.

Together, these techniques ensure that your child element will remain centered on the screen while the parent element is visible. Adjust the styling and logic as necessary to fit your specific application’s requirements.