图像的垂直和水平中心

Question

我有一个图像，我需要垂直和水平居中！我尝试过在线教程，尝试使用＆lt; verticle-align＆＃39;但我似乎无法让它发挥作用。这是我的代码。

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

使用现有的HTML尝试此CSS：

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

试试这个： 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;
}