[**JSFiddle here.**](https://jsfiddle.net/KheKhe/g794em4b/2/)

OR

```css
#left-control {
   float: left;
   height: 300px;
   width:300px;
   background-color:crimson;
}

#left-control:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#left-control img {
    vertical-align: middle;
    z-index: 1;

 margin: 0 auto;
}
```

```html
<a id="left-control">
    <img src="https://events.columbia.edu/3.10/calrsrc.MainCampus/themes/columbiaTheme/resourcesColumbia/FacebookIcon.png" />
 </a>
```

I have taken the following hack from [here](https://stackoverflow.com/questions/31844276/how-to-vertically-center-a-image-in-a-div) to vertically center an `img` in an `a` tag. 

The problem is that I am used to using `margin:0 auto;` to center things. But the problem is that it is not working along with this technique of centering vertically. 

Why is that? What can I do to solve this problem?