Centering the 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 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>

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.

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;
}

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;
}

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;
}

Vertically centering images in bootstrap column

instead of using

transform: translate(-50%, -50%);

use

transform: translateX(-50%);

Also, you set a class col-lg-8 to the body and that class has has the position set to relative. I found if you change the position to 'initial' you'll be able to vertically align the image.

.col-lg-8 {
position: initial !important;
}

.image-container {  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  position: absolute;}
img {  width: 100%;}
.col-lg-8 {  position: initial !important;}

<!DOCTYPE html><html>
<head>  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="style.css" />  <script src="script.js"></script></head><nav class="navbar navbar-toggleable-md navbar-light bg-faded">  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">    <ul class="navbar-nav mr-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="text" placeholder="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>
<body class="col-lg-8">  <div class="image-container">    <img src="data:image/jpeg;base64,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"    />  </div></body>
</html>

Centering an image on top of another one with Bootstrap 4

Ok so now it's working.
I removed Bootstrap and just used flexbox.

the background in a flex container :

.container{
display: flex;
height: 300px;
background-image: url("../ordinateur.jpg");
}

the image:

.image{

width: 150px;
height: 150px;
margin: auto; /* center the image in the container */}