How to align an image dead center with bootstrap

Solution 1:

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

Solution 2:

The correct way of doing this is

<div class="row text-center">
  <img ...>
</div>

Solution 3:

Update 2018

The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...

<img src="..." class="mx-auto d-block"/>