jumbotron image is not centered

Question

I have the following code for the header. The image is not centered when I change to different sizes. How can I center the image for all size views.

  <div class="jumbotron">
        <img src="images/header.jpg" alt="Banner" class="img-responsive">
   </div>

Answer 1

You can use with this changes on your css file :

// Center all elements in jumbotron, if <img> is not in display block
.jumbotron{
    text-align:center;
}

Or this, more specific (I prefer) :

// Set the <img> in display block and use margin auto to center
.jumbotron img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

Answer 2

If I'm not wrong, what you want to do here is make the image centered in the middle of your .jumbotron. For this, you can use CSS Flexbox:

.jumbotron {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
   <img src="images/header.jpg" alt="Banner" class="img-responsive">
 </div>

This will center the img in the exact center of the .jumbotron, both horizontally and vertically.

Cheers!