Bild ausrichten per CSS

[KC]

Hallo Leute,

ich bekomme jedesmal die Kriese beim Ausrichten von Banner Bildern. Das mit CSS margin: auto und display: block funktioniert keinesmal obwohl es auf allen möglichen CSS Tutorials so beschrieben wird.

HTML Code:

<section class="section main-banner" id="top" data-section="section1">
      
      <img src="assets/images/banner.jpg" />
  </section>

CSS:

.main-banner {
  position: relative;
  overflow: hidden;
  margin-bottom: -7px;
    max-width:100%;
    margin-top: 150px;
    background-color: #000;
}

Das Bild soll je nach Screensize horizontal und vertical zentriert werden. Ich bitte um Support