February 6, 201214 yr Here's something I didn't expect to be so hard: I have a page the display a random photo. The image should not be larger than the viewport. (here I applied max-width) The image should be centered in the viewport, horizontally and vertically. To center vertically I tried to style the containers for the image as CSS tables. This does the vertical centering, but then the image doesn't scale down with the viewport. Seems that elements with table properties stretch to fit its content. Which defeat my fluid image size. I then tried to use relative positioning, making the HTML and BODY element 100% height, offsetting the image container by 50% placing it at half height of the viewport. But when I try to position the image itself by -50% (thinking it's take its height) to align the image in the vertical center instead of starting at the center nothing seem to work. relative position by percentage doesn't do anything. Fixed values does, but I can't use that because I don't know the image height. Anyone has any idea on how to center a fluid image vertically in the viewport using CSS? Don't want to use JS for this.
February 7, 201214 yr You probably need javascript to do it properly to find out the window size and size the image as a % of it. However, this works using very simple CSS:- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Web Development"> <title>Test</title> <style type="text/css"> img { display: block; position: fixed; right: 30%; left: 30%; top: 30%; bottom: 30%; width: 40%; height: 40%; } </style> </head> <body> <img src="image.jpg" alt="My image"> </body> </html> The left, right, top and bottom positions are 30% leaving 40% x 40% in the middle for an image. However, any image (all sizes) are resized to 40% x 40% of any window size, which will distort them if the window size is not the same proportions as the image. The left, right, top and bottom positions are 30% leaving 40% in the middle for an image. So it's not a very satisfactory solution unless the image just has a pattern that can stretch. If you delete the width and right size, the image will retain its resolution in proportion to the changing height, but it doesn't then stay exactly in the center in all window widths:- img { display: block; position: fixed; left: 35%; top: 30%; bottom: 30%; height: 40%; } Edited February 7, 201214 yr by Wickham
February 7, 201214 yr I've always had problems with this, resorted to jQuery/javascript 90% of the time...
Create an account or sign in to comment