Question

I have a div which is position:fixed so that it it always in the center of the browser viewport.

Inside of that div, I have another div that is currently set on position:absolute. My understanding is that this inner div is actually being positioned relative to the html document since there are no absolute or relative parent elements.

I’m not sure whether all that is exactly right — but anyway, I need the inner div to also stay centered to the viewport while at the same time staying put relative to its parent container. They need to move together coherently while both staying viewport-centered.

I attempted using position:fixed and position:relative on the inner div but neither seem to be working out. They do not move coherently together.

#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}

#inner-div {
top: 35%;
left: 30%; 
position: ??? ;     
}

Thanks!

Answer 1

You can’t center the inner div with the viewport using absolute positionning while staying relative to his parent container. Why not using margin: 0 auto on the inner div? That way, it will be centered in the outer div, which is absolute positioned in the middle of the viewport. Everything would be centered that way, no?