Center image in ajustable div

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.

possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Huey, Jul 25 '15 at 09:38
What is your question about then, if not about centering an image within a div? — Huey, Jul 25 '15 at 09:46
Why? Are you targeting an unusual browser this doesn't work on? — Huey, Jul 25 '15 at 10:03

score 2 · Accepted Answer · answered Jul 25 '15 at 10:48

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>

I'd like to point out that there's [a similar answer](http://stackoverflow.com/a/23384995/1693947) on [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Huey, Aug 07 '15 at 03:11

score 0 · Answer 2 · answered Jul 25 '15 at 10:10

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 :)

Center image in ajustable div

2 Answers2