How can I align my icon to be in center of my square box?

cyber8200 Published at Dev

cyber8200

I'm trying to align my icon inside a square div to have both properties: CENTER + MIDDLE

This is what I hope to get :

enter image description here

I have tried this on my CSS :

/* Slick Settings */

  .slick-next {
    right: 0px;
    border: 1px solid black;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
  }

  .slick-prev {
    left: 360px;
    border: 1px solid black;
    width:35px;
    height:35px;
    padding: 5px;
    display:table;
    text-align: center;
  }

  .slick-next:before {
    font-family: FontAwesome;
    content:"\f105";
    color:black;
    display: table-cell;
    vertical-align: middle;
    left: 50%;
  }

  .slick-prev:before {
    font-family: FontAwesome;
    content:"\f104";
    color:black;
    display: table-cell;
    vertical-align: middle;
    left: 50%;
  }

This is what I produce :

enter image description here

Can someone help me with this ?

Feel free to suggest me if you have any other better way of archieving this.

Thanks in advance.

cyber8200

Opp...

After playing around with my CSS. This seem to do the trick.

/* Slick Settings */

.slick-next {
  right: 10px;

  border: 1px solid black;
  width:35px;
  height:35px;
  padding: 5px;
  display:table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.slick-prev {
  left: 360px;

  border: 1px solid black;
  width:35px;
  height:35px;
  padding: 5px;
  display:table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

}

.slick-next:before {
  font-family: FontAwesome;
  content:"\f105";
  color:black;


}

.slick-prev:before {
  font-family: FontAwesome;
  content:"\f104";
  color:black;


}

I think I am all-set. I got it now.

enter image description here