title: Center image position absolute with Bootstrap
body: <p>I tried to recreate everything as good as possible. CSS:</p>
  
  <pre><code>.container-fluid-max {
    max-width: 1440px;
    height: 300px;
    background-color: black;
    margin: 30px 0;
  }
  .bg-img{
    margin: 0px;
    padding: 0px;
    height:300px;
    border: 3px 0 solid $b-black;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .bg-img img{
    max-height:450px;
    position:absolute;
    bottom: 0px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/DTcHh/19984/" rel="nofollow">https://jsfiddle.net/DTcHh/19984/</a></p>
  
  <p>My problem: I am trying to get the image to be centered. Since in my project, the img is always a different/random one, I cannot really tell what height/width it does have. Just saying I dont want it to be higher than 450px.</p>
  
  <p>And it's okay that it's entering the div above. That's something I want to achieve.</p>