How to place the image in the center for any device?

Question

I am working on a break in the phone. Therefore, I need to provide the code in a common format so that it applies to any device.

I have an image with a size with dimensions of 2350 * 180 .

I tried with these codes.

width: 100%; top: 100%; margin-top: 50%; 

but they are not in the center for various devices.

then I tried it with

 vertical-align: middle; 

then

 display: block; text-align: center; 

then

 <table> <tr style="vertical-align: middle;"> <td id="main" style="width: 100%;"> <img src="" /> </td> </tr> </table> 

For all the CSS mentioned above, my output ----> images stick to the top edge at the top of the screen , as if I gave margin-top: 0;

Please help me and correct me.

I have 2 more questions in relation to this large image.

I now have a background image

 style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; " 

this code only works for a few. Is there an error in my code?

The second question, when I scroll, is there a scroll bar that is visible. I added

 style="overflow:hidden;" <img src=""/> tag. 

Am I correcting or adding any other code?

Answer 1

This works - remember to add the image url to the src attribute. You can also use div instead of your table.

HTML:

 <table> <tr> <td> <img src="" /> </td> </tr> </table> 

CSS

 body, html { height: 100%; margin: 0; } table { width: 100%; height: 100%; text-align: center; } img { max-width: 100%; vertical-align: middle; } 

Note. If you have parent elements surrounding your table, you also need to add height: 100%; .

Answer 2

Add max-width:100% to the image and put it in the height:100% table

 body, html{ height:100%; margin:0; padding:0 } table{ height:100%; background:#fffad6; } img{ max-width:100%; } 

Demo

Answer 3

I dug a little, and this is what I came up to in order to center the image both horizontal and vertical: http://jsfiddle.net/jdtjk/2/

CSS

 .middle{ position:absolute; top:0; bottom:0; right: 0; left: 0; margin: auto; } 

Html:

 <div> <img src="*" class="middle" /> </div> 

Edit:

Changed so that the image scaled to fit the window: http://jsfiddle.net/jdtjk/5/

CSS changes:

 .middle{ position:absolute; top:0; bottom:0; right: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; height: auto; width: auto; } 

If you want to limit the upper / lower scale, you can use the min-height min-width properties in css. If you want to zoom, you can change the maximum properties.