How to position an image at the center for any device?

Question

I am working on Phone gap. So,I need to give the code in a generic format so that it is applicable to any device.

I have a image with dimension with dimensions 2350*180.

I have tried with these codes..

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

but,these is not at 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 above CSS mentioned,my output---->image sticks to the top margin to the top of the screen as If I have given margin-top:0;

Please help me and correct me.

I have 2 more questions with respect to this big image

Now, I have a background image

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

this code works for few only.. Is there any mistake in my code?

2nd question, is when I scroll there is scroll bar thats visible. SO I added

style="overflow:hidden;"

<img src=""/> tag.

am I correct or any other code should be added?

Answer 1

This works – don't forget to add an image-url to the src-attribute. Also you just could use a 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'll need to add height: 100%; to them as well.

Answer 2

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

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

DEMO

Answer 3

I did a bit digging around and this what I came up width to center a 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 image downscales to fit window size: http://jsfiddle.net/jdtjk/5/

Changes to CSS:

.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 up/downscale can you use min-width min-height properties in css. If you want to upscale the image can you change the max properties.