水平和垂直将容器div居中

目前，我正在一个包含四行的网站上工作。我想在已经完成水平居中的情况下将容器水平和垂直居中。

有人可以帮我吗？我已经尝试过使用“ display：flex”，但是它仍然无法正常工作。

我正在使用Twitter Bootstrap和Font Awesome。

https://jsfiddle.net/L9dbzgpr/

代码：

<div class="container text-center">
    <div class="row">
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-5x fa-youtube-play"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-5x fa-facebook"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://soundcloud.com/" target="_blank"><i class="fa fa-5x fa-soundcloud"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.google.ch/" target="_blank"><i class="fa fa-5x fa-google"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="https://instagram.com/accounts/login" target="_blank"><i class="fa fa-5x fa-instagram"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.dropbox.com/" target="_blank"><i class="fa fa-5x fa-dropbox"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-twitter"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>

        </div>
    </div>
</div>

CSS：

@charset "UTF-8";
/********** General styles **********/
body {
    font-size: 16px;
    background: url('../media/images/banner.jpg') no-repeat center center fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.container {
    margin: 0 auto; /* horizontally centered */
}
.margin-top {
    margin-top: 3em;
}

我的解决方案的更新： HTML：

@charset "UTF-8";
/********** General styles **********/
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-size: 16px;
    background: url('../media/images/banner.jpg') no-repeat center center fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.wrapper {
    display: table;
    height: 100%;
    margin: 0 auto;
}
.wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}
.margin-top {
    margin-top: 3em;
}
.col-sm-3 {
    padding-right: 4em;
    padding-left: 4em;
}

CSS：

@charset "UTF-8";
/********** General styles **********/
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-size: 16px;
    background-color: blue;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.wrapper {
    display: table;
    height: 100%;
    margin: 0 auto;
}
.wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}
.margin-top {
    margin-top: 3em;
}
.col-sm-3 {
    padding-right: 4em;
    padding-left: 4em;
}