Élément disparu avec margin:auto;

Bonsoir, lorsque j'utilise margin:auto; pour centrer le conteneur #big-intro-wrapper-content par dessus un background-image, tout le conteneur ainsi que ses éléments à l'intérieur disparaissent. Mais quand j'utilise un position:absolute; le conteneur #big-intro-wrapper-content s'affiche sans problème. Pourtant j'ai bien mit un z-index supérieur au background-image pour le #big-intro-wrapper-content afin qu'il s'affiche bien. Merci à ceux qui m'aideront.

CODE CSS :

#big-intro-wrapper-banner {
    position:absolute;
    top:0;
    left:0;
    display:block;
    z-index:1010;
    width:100%;
    height:100%;
}

.banner {
    display:block;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

#big-intro-wrapper-content {
    height:100%;
    width:100%;
    z-index:1068;
    color:#ffffff;
}

#big-intro-wrapper-content h2 {
    font-family:geolight;
    font-size:38px;
    text-align:center;
}

#big-intro-wrapper-content p {
    display:flex;
    justify-content:center;
    margin:25px;
    font-weight:bold;
}

#social-networks-content {
    display:flex;
    align-items:center;
    flex-direction:column;
}

CODE HTML :

<div id="big-intro-wrapper-banner">
    <span class="banner" style="background-image:url(//localhost/helpfinding/assets/images/banner.jpg"></span>
</div>

<div id="big-intro-wrapper-content">
    <h2>test test test test test test test test test test test test.</h2>
    <p>Suivez-nous sur les réseaux sociaux.</p>
    <div id="social-networks-content">
        <div class="twitter-btn"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</div>
        <div class="facebook-btn"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</div>
    </div>
</div>