Question: I am trying to align image inside DIV horizontally and vertically. Problem is that I tried several methods and none of them worked for me.

This is code that I am using:

CSS

```
img{
    max-width:100%;
    vertical-align: middle;
}

#slika {
float: center;
height: 126px;
width: 111px;
text-align: center;
}

```

HTML

```
<div id="slika">
<img src="images/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>

```

jsfiddle: [HERE](http://jsfiddle.net/dduygx0x/1/)

Can soemone share his thoughts with me? I can't find solution. It always stays aligned at top.

Answer: 
**JSFiddle - [DEMO](http://jsfiddle.net/L3eyfsrc/)**

```
img {
    max-width:100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
#slika {
    height: 126px;
    width: 111px;
    text-align: center;
    border: 1px #000 solid;
}

```
You can do it by adding a margin of 50% and then a top of -(imageheight/2)

```
 img{
    max-width:100%;
    vertical-align: middle;
    margin-top:50%;
    position:relative;
    top:-37px;
}

#slika {
float: left;
height: 126px;
width: 111px;
text-align: center;
border:1px solid red;
}

```

fiddle here: <http://jsfiddle.net/dduygx0x/2/>