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

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

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

<div id="jrXpress">
  <table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="middle">
        <a href="https://www.jrxpress.com" title="jrXpress.com" alt="jrXpress.com" target="_blank"><img src="https://jrxpress.com/logo.jpg" width="280" height="80" border="0" /></a>
      </td>
    </tr>
  </table>
</div>