I have a div inside another div. The outer div has a starting width & height of 0px & slowly increases in width & height, which creates the effect of slowly revealing the inner div(from the centre outwards).
I do this using Javascripts setInterval & just increase the dimensions of the outer div every iteration.
Because the outer div is absolutely positioned I find that I need to recentre(horiz & vert) the inner div within the outer div to ensure that I reveal the div from the exact centre outwards as the outer div expands.
Is there an automatic way to ensure that the inner div is always centred within the outer div as it expands? Using CSS or any other method?
The best way I have found is if I change the inner divs position to fixed but then the overflow:hidden(on the outer div) doesnt get adherred to???
<html>
<head>
</head>
<body>
<!-- Using Javascript I will slowly increase the outer divs width & height: making the innerdiv slowly appear.
Although, as the outer div resizes, the inner div will be positioned relativly, how can I keep its position at 20,20 of the body ALL the time? -->
<div style="position: absolute; background-color: blue; left: 10px; top: 10px; width: 300px; height: 300px; overflow: hidden;">
<div style="position: fixed; background-color: red; left: 20px; top: 20px; width: 500px; height: 300px;">
</div>
</div>
</body>
</html>
If you don’t need IE7 support, I’d suggest you use display:table-cell to achieve the vertical centering.
http://jsfiddle.net/fte2t/1/
If you do need IE7, only way will be by use of table, i’m afraid…