在html中使图像对齐屏幕中心

Question

我正在 iOS 设备上加载图像。我希望我的图像在所有屏幕和方向上水平居中和垂直居中。我已经尝试过使用 table 和 td ，它水平居中但不垂直居中对齐。这是我试过的html：

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

CSS:

 html, body
{
    height: 100%;
}

原文由 V-Xtreme 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是表，您可以使用 div 和 img 实现相同的效果

工作演示

HTML

 <div><img src="http://placehold.it/350x150"></div>

CSS

 html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

div {
    position:relative;
    height: 100%;
    width:100%;
}

div img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

原文由 Surjith S M 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一个简单易行的方法：

 .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

原文由 Arash Hatami 发布，翻译遵循 CC BY-SA 4.0 许可协议