Center image in ajustable div - css

Question

I have a Div with a 10% width and within its content there is an image I want to be able to center vertically/Horizontally and resize to fit in its container.
It resize well when the windows resize but do not know how can i center the image within the container.
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width:80%;
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
Here is the demo: https://jsfiddle.net/3t2shesb/
Thanks in advance.

Answer 1

If I understand what you want to do, try using transform and position:relative on the img to give you something like this:
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
As shown here:
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>

Answer 2

The following works ...
HTML:
<div class='Container'>
<img src='test.png'>
</div>
CSS:
div.Container {
position:absolute;
top:25%;left:25%;
width:50%;height:50%;
background:#FF0;
}
div.Container > img {
display:block;
position:absolute;
left:10%; width:auto;
top:35%; height:30%;
}
Here I assign all 100% of the parents height in the img’s css-declaration (2*)35% + 30%, and use that for scaling ... Maybe not what you want, but it works ... try it out :)