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;
}

```
Here is my soluton for your problem using the common table - table-cell way:

I wrapped you image in a new div:

```
<div id="slika">
    <div class="img-wrapper">
       <img ....>
    </div>
</div>

```

and altered the CSS:

```
img{
    max-width:100%;
}

.img-wrapper{
    display: table-cell;
    vertical-align: middle;
}

#slika {
    display: table;
    float: left;
    height: 126px;
    width: 111px;
    text-align: center;
    vertical-align: middle;
}

```

```css
    img{
        max-width:100%;
    }

    .img-wrapper{
        display: table-cell;
        vertical-align: middle;
    }

    #slika {
       border: 1px solid black;
        display: table;
        float: left;
        height: 126px;
        width: 111px;
        text-align: center;
        vertical-align: middle;
    }
```

```html
    <div id="slika">
        <div class="img-wrapper">
    <img src="http://tommyvirtualnikatalog.com.hr/images/akcija/prehrana/2105602.png" width="auto" height="auto" alt="2105602.png">
        </div>
    </div>
```

The benefit of this solution ist that it ist absolut dynamical an can easely made responsive!!