Center an img-responsive bootstrap

If you want to centrate an image both vertically and horizontally you can use the position: relative and position: absolute properties combined with the top, left, bottom, right and automatic margins to center the image vertically and horizontally with respect to to the div.

#centrador{
  position: relative;
  width: 400px;
  height: 400px;
  background-color: red;
}

#imagen{
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

<div id="centrador">
   <img id="imagen" src="https://s-media-cache-ak0.pinimg.com/736x/c4/76/27/c476278504682e622fabe9b0932098c3.jpg">
</div>

If instead you just center the image horizontally within the div, what you can do is use text-align: center to centen the image inside your div since the image is a inline element by default, it is say, it behaves like any text type element.

#centrador{
  text-align: center;
  width: 400px;
  height: 400px;
  background-color: red;
}

#imagen{
    width: 100px;
}

<div id="centrador">
   <img id="imagen" src="https://s-media-cache-ak0.pinimg.com/736x/c4/76/27/c476278504682e622fabe9b0932098c3.jpg">
</div>

If you have any questions about positioning (with position: relative and position: absolute ) and how to use it you can check my question-answer here .

Add class center-block to your image

<img src="../img/012.jpg" class="img-responsive center-block" alt="titulo"/>

try with:

<div class="col-md-6 .img-responsive center-block">
  <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
  <div class="h-30"></div>
</div>

Or you can also try:

<div class="col-md-6 text-center">
  <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
  <div class="h-30"></div>
</div>

To center an image horizontally you can specify it like this:

HTML:

<div class="col-md-6 ">
    <img src="../img/012.jpg" class="img-responsive" alt="titulo"/>
    <div class="h-30"></div>
</div>

CSS:

img.img-responsive {
    margin: auto
    display: block
}

Have you tried the properties of Flex box?

.elemento-padre {
	display: flex;
	width: 500px;
	height: 500px;
	justify-content: center;
	align-items: center;
	background: #666;
}

.elemento-hijo {
	display: flex;
	width: 100px;
	height: 100px;
	background: #999;
}

<!--Contenedor de la imagen-->
<div class="elemento-padre">
  
  <!--La imagen-->
  <img src="" class="elemento-hijo">

</div>

The solution is very easy, just add the class that you had previously mentioned class="center-block" , what this does is center the image within the columns that you assigned to that image, for example if your image is occupying 6 columns wide but is very wide horizontally that will not be noticed, if you occupy a smaller image if you will notice that the image is centered. Well returning to the main problem, to move the image towards the center use class="col-md-offset-*" , this will scroll horizontally and to the right the number of columns you assign. As you have 6 columns occupied, there are 6 more columns left, those you divide between two, to have three columns on the left and three on the right. Then in that same div you put class="col-md-offset-3" . Then just put all your code between a <div class="row"></div> to ensure that the content will be displayed in a single row, and the content will not mix with the other elements of your code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
	<div class="col-md-6 col-md-offset-3">
			<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BODcyODI4NDk3NV5BMl5BanBnXkFtZTgwNDkzODMzMzI@._CR1012,146,727,727_UX402_UY402._SY201_SX201_AL_.jpg" class="img-responsive center-block" alt="Imagen"/>
			<div class="h-30"></div>
	</div>
</div>
</div>

Try it on your project, because it seems to me that it is not executed correctly here.

According to the w3schools page:

  

Add display:inline to the first image to force it to be centered (the   % co_of% class adds% co_of% to the image, which makes it   jump to the left of the screen).

That is, when you add .img-responsive to an image, it will move to the left margin, center it by adding display:block to your image, leaving it like this:

<div class="col-md-6 ">
  <img src="../img/012.jpg" class="img-responsive" style="display:inline" alt="titulo" />
  <div class="h-30"></div>
</div>

Resulelto only with Bootstrap 4.1

url info link

class="mx-auto d-block"

<div class="card border-white text-white bg-dark">
    <div class="card-header">
        TITLE
    </div>  
    <img class="mx-auto d-block" src="03.png" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Title</h4>
        <p class="card-text">Text</p>
    </div>
    <div class="card-footer">
        Any text
    </div>
</div>

Greetings.