Centering image

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

how to center image within the parent element?
Your code so far

/* file: index.html */
<html>
<header>
  <title>My page</title>
  <link rel="stylesheet" href="styles.css">
</header>
<body>
  <main id="main">
      <div id="title">Dr. Norman Borlaug</div>
        <div id="img-div">
          <figcaption id="img-caption">Image</figcaption>
          <img id="image" src="desktop/DrNorman.jpeg" alt="image">
        </div>
      </div>
      <div id="tribute-info">Dr. Norman Borlaug who saved abillion lives</div>
      <a id="tribute-link" href=" https://tribute-page.freecodecamp.rocks" target="_blank"></a>          
  </main>
</body>
</html>
/* file: styles.css */

#main{

}
#image{
max-width: 100%;
height: auto;
}
img{
display: block;
}
#title{

text-align: center;
font-weight: bold;
}

  **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

Hi @DMarken

Welcome and well done!
Daniel, I think this link might help you with that task:

Happy coding! :muscle: :smile: