html - 图像的垂直和水平中心

Question

我有一张图片需要垂直居中和水平居中!我已经尝试过尝试使用“verticle-align”的在线教程，但我似乎无法让它工作。这是我的代码。

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