Fixed text centered on background image

How to position text to be fixed and centered on full page background image. Position absolute doesn't work (my text is on top of the page) and position fixed works but text goes down when I scroll page down. I found tutorial on css tricks but I can't make this to work. Anyone have an idea?

HTML:

<div class="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="banner-content">
                    <h1>Lorem ipsum</h1>
                    <hr />
                    <p>Lorem ipsum dolor sit...</p>
                </div><!-- end banner-content -->
            </div><!-- end col-md-12 !-->
        </div><!-- end row !-->
    </div><!-- end container !-->
</div><!-- end intro !-->

CSS:

.intro {
    width: 100%;
    height: 100%;
    background: url(../images/banner.jpg) no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.banner-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}
.banner-content h1 {
    font-size: 4em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-style: italic;
}
.banner-content p {
    color: #fff;
    text-align: center;
    font-style: italic;
    font-size: 1.7em;
}
.banner-content hr {
    width: 100%;
    max-width: 750px;
    border: 1px solid #fff;
}