How to Center an Image in Bootstrap

How to align an image dead center with bootstrap

Twitter Bootstrap v3.0.3 has a class: center-block

Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.

Just need to add a class .center-block in the img tag, looks like this

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap already has css style call .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

You can see a sample from here

How can I center an image in Bootstrap?

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

Or leave it as inline-block and wrapped it in a div with .text-center:

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

I made a fiddle showing both ways.
They are documented here as well.

How To Center Image Within Bootstrap Column

Add display: block and margin: auto; it will do the trick

.services-section img {
    width: 90px;
    height: 90px;
    margin: auto;    
    display: block;
}

Responsive image align center bootstrap 3

If you're using Bootstrap v3.0.1 or greater, you should use this solution instead. It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature.

My original answer is shown below for posterity

This is a pleasantly easy fix. Because .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image:

.product .img-responsive {
    margin: 0 auto;
}

Centering an image within a bootstrap card

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.

How do I center an image in Bootstrap?

center-block has been replaced by mx-auto in Bootstrap 4. mx-auto represents auto x-axis margins (margin=left: auto; margin-right: auto) so it
can be used to center display:block or display:flex elements.

<div class="carousel-item active">
          <img class="img-fluid mx-auto" src="https://unsplash.it/200/200" alt="First slide">
</div>

Center Image Vertically and Horizontally in Bootstrap Grid

If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center

 <div class="col d-flex align-items-center justify-content-center">

More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment

Center Image in Bootstrap

I figured it out. I added a red border so that I could see the actual div and I saw that the width was the culprit. It was centering but I was telling the surrounding div to be only 300px wide. I changed it to 100% and used @abney317's idea of the text-align then presto.

.homepage-front-logo {
  position: absolute; 
  width: 100%;
  display: block;
  text-align: center;
}