Make image scale with and stay in middle of div

Question

I'm using Bootstrap, and my code looks like this:

<div class='col-md-12 col-sm-12 col-xs-12'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' src="blabla.jpg">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>
    </div>
</div>

I want the img inside imgDiv div to always be vertically and horizontally centered and to scale accordingly when some of the other two divs (div1 and div2) change height. I tried many things but nothing solved this problem...

Could you please make a list of the *"things"* you tried? It would also be good to clarify what you mean by *"accordingly"* in this context. According to what? Could you provide a [mcve]? — tao, May 13 '17 at 20:00
Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — tao, May 13 '17 at 20:09

score 1 · Accepted Answer · answered May 13 '17 at 20:03

You can make the row display: flex so that the 3 columns will be the same height, then add display: flex; align-items: center; justify-content: center; to the #imgDiv

#imgDiv {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
}

#div1 {
  background: blue;
}

#div2 {
  background: red;
}

#div1 p {
  height: 50vh;
  background: white;
}

#div2 p {
  height: 75vh;
  background: white;
}

.flex-row {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class='col-md-12 col-sm-12 col-xs-12 flex-row'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>
      <p>foo</p>
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>
      <p>foo </p>
    </div>
</div>

score 1 · Answer 2 · answered May 13 '17 at 20:19

Please add to the #myImg div (just for the example..) a 100% width :

<img id='myImg' style="width:100%" src=".....">

and add the following css :

#imgDiv{
  border: 1px solid red;
  min-height:300px;
  vertical-align: middle; 
  #myImg{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}

#div1{
   border: 1px solid blue;
   min-height:600px;
}
#div2{
border: 1px solid green;
min-height:400px;
}

#imgDiv{
  border: 1px solid red;
  min-height:300px;
  vertical-align: middle; 

}
 #myImg{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
#div1{
  border: 1px solid blue;
  min-height:600px;
}
#div2{
  border: 1px solid green;
  min-height:400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <title>JS Bin</title>
</head>
<body>
  
  <div class='col-md-12 col-sm-12 col-xs-12'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' style="width:100%" src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social.png">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>aaa
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>bbb
    </div>
</div>
  
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Make image scale with and stay in middle of div

2 Answers2