html - 如何将图像定位在任何设备的中心？

Question

我正在研究电话差距。因此，我需要以通用格式提供代码，以便它适用于任何设备。

我有一张尺寸为 2350*180 的图片。

我试过这些代码..

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

但是，这些并不是各种设备的中心。

然后我试了一下

vertical-align: middle;

然后

display: block;
text-align: center;

然后

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

对于上面提到的所有 CSS，我的输出---->图像粘在屏幕顶部的上边距，就像我给了 margin-top:0;

请帮助我并纠正我。

关于这张大图，我还有2个问题

现在，我有一张背景图片

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

这段代码只适用于少数人。我的代码有什么错误吗？

第二个问题，当我滚动时，滚动条是可见的。所以我添加了

style="overflow:hidden;"

<img src=""/> tag.

我是正确的还是应该添加任何其他代码？

Answer 1

给图片添加max-width:100%，放在height:100%的表格中

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

DEMO