How To:

Place image in center of page (both vertically and horizontally) AND have image resize according to size of window!

I've been struggling with this problem all day. It seems like something that would be incredibly simple to do, and it turns out that it isn't that simple (but it's not as tricky as some make it). I have visited a multitude of different forums and articles by people with solutions, but there was always one crucial element missing. I would get the image horizontally aligned, but not vertically. Then I figured out how to get it vertically aligned and have the image resize according to window size, but the horizontal alignment of the image would magically be screwed up. I found a solution that would let me center it horizontally and vertically, but then the image could not resize. The problem was that every solution dealt in pixel sizes, not percentages. And the solutions that were pixel-independent were also not compatible with every browser (that I have seen at least).

Ok, so here is what I have come up with:

• CSS:

div.splash {
width: 100%;
height: 100%;
border: 0px;
text-align: center; <!-- This is for horizontal alignment -->
}
div.splash img {
position: relative;
top: 12%; <!-- This will place the image 12% of the way down from the top of the page, effectively centering the image vertically -->
height: 76%; <!-- This ensures the image will always be 76% of the height of the page. The width with resize automatically depending on the height, so you don't need to worry about that -->
}

• HTML:

<div class="splash">
<img src="http://www.blogger.com/splash.png" />
</div>

This is so simple! I can't believe I didn't think of it sooner.