Создание изображения выравнивания центра экрана в html

Я загружаю изображение на устройстве iOS. Я хочу, чтобы мое изображение было центрировано по горизонтали, а также вертикально центрировано со всеми экранами и ориентацией. Я пробовал его с помощью таблицы и 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%;
}

Ответ 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;
}

Ответ 2

это работает

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 более общего помогает...

Ответ 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;
}

Ответ 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%;
}

Ответ 5

Существует простой и простой способ:

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