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

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