Center container div horizontally and vertically - css

Question

Currently I'm working on a website which contains four rows. I'd like to center the container horizontally and vertically where horizontally centering is already done.
Can anyone help me, please? I already tried with "display: flex" but it still doesn't work.
I'm working with Twitter Bootstrap and Font Awesome.
https://jsfiddle.net/L9dbzgpr/
Code:
<div class="container text-center">
<div class="row">
<div class="col-sm-3"> <i class="fa fa-5x fa-desktop"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-music"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-cloud"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-cog"></i>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <i class="fa fa-5x fa-youtube-play"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-facebook"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-soundcloud"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-google"></i>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <i class="fa fa-5x fa-instagram"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-dropbox"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-twitter"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-cog"></i>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <i class="fa fa-5x fa-cog"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-desktop"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-music"></i>
</div>
<div class="col-sm-3"> <i class="fa fa-5x fa-cloud"></i>
</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;
}
Update of my solution:
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;
}

Answer 1

Patrick F, Hi there.
Have a look at just using this to center both ways.
.center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
In your code you use col-sm-3 I changed this to col-xs-3 to stop all the display items going 1 row vertical in small screens. Unless that is what you want to happen.
Resize the window and you will see what I mean.
Here is the Fiddle.

Answer 2

If you don't know the height and width of the container you could use this styling to center the element horizontally and vertically:
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
But I don't know if this has other unwanted effects.