Here is my test page:
The slides are marked up like this:
<div id="slide1" class="slide">
<h2>PREPARE FOR RELAUNCH OF SITE IN 14:12:36:05</h2>
<img src="img/gr_slide1.jpg" border="0" />
The <div> is positioned relative and initially not displayed:
The images are 100% of the browser's window width:
What I want to do seems really simple... center the <h2> element both horizontally and vertically within the <div>.
I assume I need <h2> to be positioned absolute, in order to be displayed over the image.
I could make the <div> have a background image, but then I can't easily stretch the image to fill the entire browser width exactly?
I do not know the width or height of the <div>, because it varies depending on the browser window size.
I do not know the width or height of the <h2>, because it varies depending on its content (the text).
Would appreciate any advice. Is there some way to accomplish this?