Question

I know how to center a div layer with respect to it’s wrapper or parent container, but what about When I have a div inside of a div inside of the page body. How do I center the smallest div with respect to the body?

<div id="1" style="width: 100%">
<div id="2" style="width: 22.5%; height: 1000000000px; margin-left: 12%;">
<div id="3" style="position: absolute;">
</div>
</div>
</div>

In the above example, How can I center div with id=”3″ in respect to div with id=”1″?

Answer 1

#1 must be position: absolute, #3 set left: 50% and offset half the width to the left

#d1 {
    position: absolute;
}

#d3 {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}

JSFiddle for playing.

I have moved the inline styles to the CSS panel and changed the ids to d1, d2 and d3 respectively.