How to align an image dead center with bootstrap

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> <div> <div></div> <div><img src="logo.png" /></div> <div></div> </div> </div> 

What's the easiest method to get an image centered relative to the page?

17 Answers

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> <div> <div></div> <div><img src="logo.png" /></div> <div></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

The correct way of doing this is

<div> <img ...> </div> 

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="..."/> 

Add 'center-block' to image as class - no additional css needed

<img src="images/default.jpg"/> 

Twitter bootstrap has a class that centers: .pagination-centered

It worked for me to do:

<div> <div><img src="header.png" alt="header" /></div> </div> 

The css for the class is:

.pagination-centered { text-align: center; } 

You could use the following. It supports Bootstrap 3.x above.

<img src="..." alt="..." /> 

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

Works for me. try using center-block

<div> <div> <div></div> <div><img src="logo.png" /></div> <div></div> </div> </div> 

I need the same and here I found the solution:

<div> <div> <div> This div will be centred. </div> </div> </div> 

and to CSS:

[class*="span"].centred { margin-left: auto; margin-right: auto; float: none; } 

You can use margin property with the bootstrap img class.

.name-of-class .img-responsive { margin: 0 auto; } 

I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.

<div> <div> <img src="logo.png" /> </div> </div> 

Seems we could use a new HTML5 feature if the browser version is not a problem:

in HTML files :

<div> 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.

Just use following bootstrap class to fix it

<img src="../path/to/.." alt="Image"> 

You should use

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

I created this and added to Site.css.

.img-responsive-center { display: block; height: auto; max-width: 100%; margin-left:auto; margin-right:auto; } 

A lot of the above options didn't work for me. However, this worked!

<div> <div> <div><img src="img_path" /></div> </div> </div> 

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.