Website zentrieren auch bei Zoom out

  • Hallo,


    vor ab, ich bin ein recht blutiger Anfänger in diesem Bereich, habe mich seit 2 Wochen in das Thema HTML und CSS eingelesen.


    Mitlerweile habe ich auch schon das Internet nach Lösungen durchforstet und etliches ausprobiert aber ich finde den Fehler leider nicht:rolleyes:


    Zu meinem Problem:


    Mein Ziel ist es das meine Website zentriert bleibt auch wenn ich die Seite mit (Strg und Mausrad) verkleiner bzw. heraus zoome.


    Wenn ich den Browser auf seine 100% Zoom einstellung lasse, ist auch alles zentriert aber wenn ich heraus zoome bleibt es so und es wird nach links kleiner.

    Ich hoffe ihr versteht was ich meine...


    Ich hatte schon recht viel umgesetzt (Logo, Nav-Leiste, Bilder mit hover Effekt + Titel und den Footer) aber um den Fehler zu finden bin ich wieder zurück zum Anfang um mich vom Rest nicht irritieren zu lassen.


    Momentan möchte ich nur ein weißes Blatt (meine class="sheet") auf meinen Hintergrund bringen, welches immer zentriert im Browser angezeigt werden soll, egal wie weit ich heraus zoome...

    Handy mal ausgeschlossen, das wird schließlich mit @media verändert und angepasst.


    Hier ein Link zu einer Homepage, welche zentriert bleibt trotz zoom out. -so hätte ich das auch gerne bei meiner!


    Link:

    https://friese-khb.at/




    Hir mal mein HTML Code


    <!DOCTYPE html>


    <html lang="de">


    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSAFT</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/8be19c2241.js" crossorigin="anonymous"></script>
    </head>


    <body>


    <div class="sheet">


    <header>

    <div class="logo">

    <a href="index.html"><img src="Bilder/Header-Logo.jpg" alt="Bild vom Logo"></a>

    </div>

    </header>


    </div>


    </body>


    </html>



    Und hier die CSS umsetzung:


    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }


    body{
    background-color: black;
    }



    für das sheet hatte ich folgendes schon versucht, da ich glaube das hier der fehler liegt:

    Ich habe auch schon versucht dem body feste Maße in px zu geben aber da ändert sich auch nichts ;(




    die 70% da ich ja etwas vom Hintergund haben möchte aber nur links und rechts.


    .sheet{
    width: 70%;
    position: relative;
    z-index: 2;
    background-color: white;
    }


    oder


    .sheet{

    position:fixed;
    left: 50%;
    top: 50%;
    width: 70%;
    transform:translate(-50%,-50%)
    background-color: white;

    }


    oder



    .sheet{
    position: da habe ich auch schon alles probiert...

    width: 70%;

    margin: 0 auto;
    background-color: white;
    }


    oder


    .sheet{
    position: static;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    }


    oder


    .sheet{
    display: block;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    translate: center;
    }


    oder


    .sheet{
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    }


    oder


    .sheet{
    text-align: center;
    width: 70%;
    margin: 0 auto;
    background-color: white;
    }


    Ich weiß einfach schon nicht mehr weiter....:wacko:

    Danke schon mal im Vorraus für eure Hilfe!