The vertically reproduced center image in the boot column

Question

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

I would prefer not to use hard-coded image sizes (number of pixels) in my code, and I'm ready to use a combination of Less, CSS, or Javascript in the solution.

The image should be centered vertically and horizontally inside 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

Answer 2

You can overcome the problem of vertical alignment using css Flexbox .

Add the class "vertical_center" to the parent div.

Then add the following css

 .vertical_center { display: flex; align-items: center; } 

Answer 3

Hope this solves your problem. Use the following CSS property to make the image vertically centered img { vertical-align: middle; } img { vertical-align: middle; } img { vertical-align: middle; } img { vertical-align: middle; } For horizontal alignment, use the bootstrap text-center class name along with another class name of your div, if you have one. For example, <div class="col-md-2 text-center">... </div> . This will make the contents of the div horizontally centered.