How to align an image dead center with bootstrap - css

Question

I'm using the bootstrap framework and trying to get an image centered horizontally without success..
I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
What's the easiest method to get an image centered relative to the page?

Answer 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

Answer 2

The correct way of doing this is
<div class="row text-center">
<img ...>
</div>

Answer 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"/>

Answer 4

Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>

Answer 5

Twitter bootstrap has a class that centers: .pagination-centered
It worked for me to do:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
.pagination-centered {
text-align: center;
}

Answer 6

You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />

Answer 7

Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:
.row .span4 {
text-align: center;
}
Edit
As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3

Answer 8

Works for me. try using center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>

Answer 9

I need the same and here I found the solution:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}

Answer 10

You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }

Answer 11

I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>

Answer 12

Seems we could use a new HTML5 feature if the browser version is not a problem:
in HTML files :
<div class="centerBloc">
I will be in the center
</div>
And in CSS file, we write:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And so the div could be perfectly center in browser.

Answer 13

Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">

Answer 14

You should use
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
#media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
#media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}

Answer 15

I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}

Answer 16

A lot of the above options didn't work for me.
However, this worked!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>

Answer 17

IN Bootstarp 5.0
Use
.mx-auto .d-block

Answer 18

You could change the CSS of the previous solution as below:
.container, .row { text-align: center; }
This should center all the elements in the parent div as well.