使图像在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%;
}

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;
}

Answer 2

有一个简单易行的方法：

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