CSS inline block center

I'm trying to center a div element.

Example, its floating left, but it wont be in the center.. ->

Any suggestions?

.grid_3 {
  margin-top:20px;
  text-align:center;
  margin-bottom:20px;
  display: inline-block;
  margin: 0 auto;
}

.fmcircle_out {
  margin:0 auto;
  width: 200px;
  height: 200px;
  background: rgba(221,221,221,0.3);
  text-align: center;
  opacity: 0.5; 
  line-height:10px;
  border-radius:5px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover {
    opacity: 0.8; 
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  .fmcircle_out:hover .fmcircle_in img {
    margin: 30px 25px 25px 25px;
    width: 120px;
    height: 120px;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  


.fmcircle_in {
  width: 170px;
  height: 170px;
  margin: 15px;
  display: inline-block;
  overflow: hidden;

  
  border-radius: 85px;
  -moz-border-radius: 85px;
  -webkit-border-radius: 85px;
  -o-border-radius: 85px;
}

.fmcircle_in img {
  border: none;
  margin: 53px;
  width: 64px;
  height: 64px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_in span {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  width: 160px;
  background: #fff;
  color: #666666;
  padding: 5px;
  margin: 70px 0 0 0;
  height: 50px;
  line-height:20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  float: left;
  position: absolute;
  opacity: 0;

  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover .fmcircle_in span {
    opacity: 1;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }


}

  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/article">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett artikkel</span><img src="/img/article.png" alt="" />
          </div>
        </div>
      </a>
    </div>
  </div>
   
  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/event">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" /></center>
          </div>
        </div>
      </a>
    </div>
  </div>

Solution

You can use CSS Flexbox. Wrap your grids into a <div> named grid-flex (in my case), and give it following properties:

.grid-flex {
  display: flex; /* Flex Container */
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
}

Also remove the <center> tag too, it is now deprecated.

Have a look at the snippet below:

.grid-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid_3 {
  margin-top: 20px;
  text-align:center;
  margin-bottom:20px;
}

.fmcircle_out {
  margin:0 auto;
  width: 200px;
  height: 200px;
  background: rgba(221,221,221,0.3);
  text-align: center;
  opacity: 0.5; 
  line-height:10px;
  border-radius:5px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover {
    opacity: 0.8; 
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  .fmcircle_out:hover .fmcircle_in img {
    margin: 30px 25px 25px 25px;
    width: 120px;
    height: 120px;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  


.fmcircle_in {
  width: 170px;
  height: 170px;
  margin: 15px;
  display: inline-block;
  overflow: hidden;

  
  border-radius: 85px;
  -moz-border-radius: 85px;
  -webkit-border-radius: 85px;
  -o-border-radius: 85px;
}

.fmcircle_in img {
  border: none;
  margin: 53px;
  width: 64px;
  height: 64px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_in span {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  width: 160px;
  background: #fff;
  color: #666666;
  padding: 5px;
  margin: 70px 0 0 0;
  height: 50px;
  line-height:20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  float: left;
  position: absolute;
  opacity: 0;

  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
    
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

  .fmcircle_out:hover .fmcircle_in span {
    opacity: 1;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }


}

<div class="grid-flex">

  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/article">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett artikkel</span><img src="/img/article.png" alt="" />
          </div>
        </div>
      </a>
    </div>
  </div>
   
  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="/event">
        <div class="fmcircle_border">
          <div class="fmcircle_in fmcircle_blue">
            <span>Opprett et kurs/event</span><img src="/img/event3.png" alt="" />
          </div>
        </div>
      </a>
    </div>
  </div>

</div>

Hope this helps!