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

取代相同的表格

<强> Working Demo

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

Answer 3

尝试使用background-position:50% 50%

的背景图片

http://jsfiddle.net/Zword/Ve6yz/3/

html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}

Answer 4

试试这个|的 DEMO

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

<强> CSS

html, body { height: 100%; } table{ height:100%; } td.height{ height:100%; }

Answer 5

this seems to work

<强> CSS

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

<强> HTML

<table width=100% height=100% border="1"> 
    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </td>
    </tr>
</table>

如果你想知道我改变了什么，那么让我告诉你即使我想知道相同的：）

但我认为，使body和html标签更加通用有帮助...

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

5 个答案: