html - 如何将 Logo 放在背景图像的中心？

Question

我想将 Logo 放在背景图片的中心。我通过添加边距尝试了此操作。但是当我将屏幕调整为小尺寸时，它会产生额外的空间。我认为这不是正确的方法。请帮助我解决这个问题。

HTML:

<div class="details-section section">
        <div class="container-fluid">
            <div class="equal row">
                <div class="big-small">
                    <div class="big col-sm-8">
                        <img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/>
                    </div>
                    <div class="small col-sm-4"></div>
                </div>
                <div class="small-big"></div>
                <div class="big-small-big"></div>
            </div>
        </div>
    </div>

CSS:

.details-section .big {
    background: url("images/vintage-bike.jpg") no-repeat 0 0 / cover;
}
.details-section .big img {
    width: 92px;
    margin: 180px auto;
}

我在这里更新这段代码的工作 fiddle 。

Working Demo

Answer 1

第一版:

.details-section .big{
    position: relative;
    background: #f5f5f5;
}
.details-section .big img{
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

第二个版本，它只适用于固定容器高度，但有时有用:

.details-section .big{
    height: 150px; // Change if need
    background: #f5f5f5;
    text-align: center;
}
.details-section .big:after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.details-section .big img{
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/7o8bndtv/