How to center the img

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
  href="style.css"

</head>
<body>
  <main id="main">
    <p id="title">Tribute Page</p>
    <div id="img-div">
       <img id="image">
      <div id="img-caption">this picture says it all</div>
    </div>
    <p id="tribute-info">
      this is the <a id="tribute-link" href="www.google.com" target="_blank">tribute page</a> made my me
    </p>
   

  </main>

</body>
</html>
/* file: styles.css */



#img-div{
display:block;
max-width:100%;
margin:auto;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

I believe you first need to insert the img url in order to see it and play around