水平和垂直居中容器 div

Question

目前我正在开发一个包含四行的网站。我想将容器水平和垂直居中，水平居中已经完成。

有人能帮帮我吗？我已经用 "display: flex" 试过了，但还是不行。

我正在使用 Twitter Bootstrap 和 Font Awesome。

代码：

<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

如果您不知道容器的高度和宽度，您可以使用此样式将元素水平和垂直居中：

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

但我不知道这是否有其他不良影响。

Answer 2

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

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

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

这里是Fiddle。

水平和垂直居中容器 div

Center container div horizontally and vertically

html

css

containers

center

twitter-bootstrap