vertical and horizontal center of an image

Question

I have an image which I need to centre vertically as well as horizontally! I have tried the tutorials online which try using 'verticle-align' but i cannot seem to get it to work. Here is my code.

CSS

img.logo{
display: block;
margin-left: auto;
margin-right: auto;
max-width:300px;
}

       .s1{
       background-color:#FFF;
       height:100vh;    
       }

HTML

<section class="s1" data-scroll-index='0'>

    <div id="wrapper">
        <img src="images/Logo.jpg" class="logo">
    </div>    


    </section>

Answer 1

Try this CSS with your existing HTML:

img.logo {
    display: block;
    margin: auto;
    max-width:300px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:absolute;
}
.s1 {
    background-color:#FFF;
    height:100vh;
    position:relative;
}

jsFiddle example

Answer 2

Try this: FIDDLE: http://jsfiddle.net/Anee/xUud2/1/

#wrapper{
   display: table;

}
.logo{
   display:table-cell; 
   vertical-align:middle;
 }

Answer 3

Demo

img {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background: #000;
}