title: Can't align oversized image to center of div
body: <p>I have code for an image that is larger than the div it exists in, however I need it to be centered so the middle of the image shows in the div, right now it starts at the left of the image and gets cut off. I'm not sure what code will center it.</p>
  
  <p>EDIT: SOLVED MY SOLUTION IS BELOW THANK YOU ALL FOR YOUR HELP</p>
  
  <p>here is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.about {
      display: inline-block;
      position:relative;
      width:100%;
      overflow-x:hidden;
  }
  .about-img {
    content:url("//placehold.it/1000x1000");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="about"&gt;
      &lt;img class="about-img"/&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;p&gt;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.&lt;/p&gt;&lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>