Align image to vertical center when browser is resized

I have a web page with a single image and I want the image to always be centered vertically and so if the browser window is resized to a higher or shorter height, the image will always appear in the center (vertically) of the visible browser window. CSS is prefered but using a table would be fine also.
LVL 3
danomaticAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

scrathcyboyCommented:
HTML does not adequately provide for vertical centering of an element.  You could write javascript to determine the screen resolution, then put in the correct table height and number of <BR> commands to get you to the center of the screen.    With CSS, you can use absolute positioning, which other elements can and will overwrite, if you are not careful.   The absolute positioning will have to change depending on screen resolution, so once again, you are faced with inserting an absolute position in a <SPAN> or <DIV> tag, and changing that with different screen resolutions.  HTML was not designed as a "FULL PAGE" layout language, it is designed much as a word processor is -- process each line as it comes -- therefore the concept of vertical centering on a page is not handled well by it, just as it is not with a word processor.
0
yo_s_cantaCommented:
This is very simple ............
<style> body,html { height:100%;margin:0; } </style>
<table border="0" height="100%"><tr><td valign="middle">
   here your image
</td></tr></table>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
biXenCommented:
You can vertically align backgrounds, and such images, but not content, since as mentioned above content should expand as needed downwards. Therefore, if it's a visual element and not content, just put it in the background of a div and use background-position: center; to align it vertically and horizontally.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.