HTML CSS Grid Anfängerfrage

[Jesse21]

Habe heute aus Spaß mit html und css angefangen komme jetzt aber irgendwie nicht weiter,

folgendes Problem: Habe ein relativ einfaches Grid erstellt und wollte jetzt den text "Content1" vertikal zentrieren, bekomme das aber irgendwie nicht so ganz hin justify-content: center; und align-items: center; habe ich schon ausprobiert funktionieren aber irgendwie nicht. Laut https://www.mediaevent.de/css/grid-align.html soll es aber so gehen. Wäre für einen Gedankenanstoß sehr froh

Jesse

HTML:

<body>
<div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="contentleft">
        <div id="textleft">Content1</div>
    </div>
    <div id="contentright">
    <div id="textright">Content1</div>
    </div>
    <footer>Footer</footer>
</div>
</body>

CSS:

* {margin: 0; padding: 0;}
.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 0.01fr 1fr 0.01fr;
    grid-template-rows: 0.1fr 1fr 0.1fr;
    grid-template-areas:
    "nav nav nav"
    "contentleft main contentright"
    "footer footer footer";
    grid-gap: 0.0rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    color: black;
    text-align: center;
}
nav {
    grid-area: nav;
    background: green;
}
main {
    grid-area: main;
    background: red;
}
#contentleft {
    grid-area: contentleft;
    background: yellow;
}
#textleft {
    transform: rotate(-90deg);
}
#contentright {
    grid-area: contentright;
    background: orange;
}
#textright {
    transform: rotate(90deg);
}
footer {
    grid-area: footer;
    background: blue;
}

 

[kachiri]

text-align: center;

Wäre eine Möglichkeit

 

[Skandaloes]

Probier mal folgendes. Musst Du dann noch bei dem Text links einfügen.

#textright {
    transform: rotate(90deg);
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
}

 

[Jesse21]

Danke funktioniert
Thema kann geschlossen werden

 

[Skandaloes]

Super, dann hau mal weiter in die Tasten.