How to scale proportionally to the parent?

Question

I use an absolute div to put my centerbox into the imgwrap , but it don't follow the scale of my imgwrap box , even it is his parent. How could I make the center box be center of the imgwrap and scale proportionally when user resize? What's the correct way to do that? I thought absolute would follow the parent

http://jsfiddle.net/gpqAx/

 <div id='imgwrap'>
            <img src='http://www.papercut.com/images/layout/banner-background-home-tree.png'>
        <div id='myabsolute'>
            <div id='centerbox'>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod             tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse             cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non             proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
</div> <!-- imgwrap -->

Answer 1

Yes, you're right but you also need to specify the distance from the edges. Add

top: 25%;
left: 25%;
right: 25%;
bottom: 25%;

to #centerbox

You might also need to adjust its height. See this jsFiddle