Vertically center responsive image in a bootstrap column

Question

I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.

I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.

The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.

My HTML:

<div class="container-fluid">
    <div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel">
                Some content
            </div>
        </div>

        <div class="col-md-2">
            <img src="images/myimage.png" class="img-responsive center-block">
        </div>

        <div class="col-md-5">
            <div class="panel>
               Some content
            </div>
        </div>
     </div>
     </div>
 </div>

Answer 1

Here's an option using transform:

html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */

http://www.bootply.com/YG8vpg1rIf