css - 水平和垂直居中容器 div

Question

目前我在一个包含四行的网站上工作。我想在已经完成水平居中的地方水平和垂直居中容器。

有人能帮帮我吗？我已经尝试过“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;
}

Answer 1

Patrick F，您好。
看看仅使用它来使两种方式居中。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

在您的代码中，您使用 col-sm-3我将其更改为 col-xs-3停止所有显示元素在小屏幕上垂直 1 行。除非那是你想要发生的事情。
调整窗口大小，您就会明白我的意思。

这是 Fiddle 。