Center container div horizontally and vertically

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">  <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;
}

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;
}

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — robjez, Jun 30 '15 at 07:58
Could you send us a link or replicate the problem in a fiddle? — bazzlebrush, Jun 30 '15 at 08:14

score 0 · Answer 1 · answered Jun 30 '15 at 08:18

0

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.

answered Jun 30 '15 at 08:18

Sebastian

951
6
21

Thanks @Sebastian but I already tried it and it HAS untwanted effects... It only shows the last two rows on top of the page – mrstar95 Jun 30 '15 at 08:25

score 0 · Accepted Answer · answered Jun 30 '15 at 12:13

0

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.

enter image description here

answered Jun 30 '15 at 12:13

AngularJR

2,752
2
16
19

Hi @AngularJR, thanks for your help! The symbols in your fiddle aren't in the middle (spacing between orange and symbols). I uploaded my solution in my question. – mrstar95 Jun 30 '15 at 13:08
Hi, The orange block is just to show that this is in the center both ways. What you need to do now is add the correct **padding** to the items/symbols so they fit across the width/height evenly. Then they will appear centered. You need to center the `div` that holds all of these symbols just like I have done here for you. Does this help so you can get the view you want here. – AngularJR Jun 30 '15 at 22:23

Center container div horizontally and vertically

2 Answers2