Making Image Align Center Of Screen In Html

I am loading image on iOS device. I want my image to be centered horizontally as well vertically center with all screens and orientation . I have tried it using table and td , It i

Solution 1:

Instead of Table, You can achieve the same with div and img

Working Demo

HTML

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

CSS

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

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

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

Solution 2:

There is a simple and easy way :

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

Solution 3:

Try background image with 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;
}

Solution 4:

Try this | DEMO

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

CSS

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

Solution 5:

I have been using this simple code for a long time and it perfectly centers the image in the middle of the page.

body {padding:0; margin:0} .img {width:99%;}

    /* center and middle of the page */#jrXpress {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        text-align: center;
        filter: alpha(opacity=50);
        display: block;
        z-index: 666;
    }

<divid="jrXpress"><tablewidth="100%"height="100%"cellpadding="0"cellspacing="0"><tr><tdalign="center"valign="middle"><ahref="https://www.jrxpress.com"title="jrXpress.com"alt="jrXpress.com"target="_blank"><imgsrc="https://jrxpress.com/logo.jpg"width="280"height="80"border="0" /></a></td></tr></table></div>