I'm using a font created with [flaticon](http://www.flaticon.com/)

My problem is that I can't place the icon vertically in a div

I've tried everything, vertical-align: middle, change the position: absolute / relative, margin, padding, line-height = height of the div , everything!

![enter image description here](https://i.stack.imgur.com/rfLHZ.png)

flaticon css
------------

```
@font-face {
    font-family: "Flaticon";
    src: url("font/flaticon.eot");
    src: url("font/flaticon.eot#iefix") format("embedded-opentype"),
    url("font/flaticon.woff") format("woff"),
    url("font/flaticon.ttf") format("truetype"),
    url("font/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
font-style: normal;
}

.flaticon-synchronization1:before {
    content: "\e01e";
}

```

my css
------

```
    body{
        background-color: gray;
    }

    #btnTest{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        text-align: center;
    }

    #btnTest > span{

        border: 1px solid red;

    }

    #btnTest > span::before{

        font-size: 30px;
        color: white;
        border: 1px solid yellow;

    }

```

html
----

```
<div id="btnTest"><span class="flaticon-synchronization1"></span></div>

```

UPDATE , SOLUTION
-----------------

```
    #btnTest{
        width: 100px;
        height: 100px;
        display: table;
    }

    #btnTest > span{

        display: table-cell;
        vertical-align: middle;

    }

    #btnTest > span::before{

        font-size: 30px;
        color: white;
        border: 1px solid yellow;

    }

```