Rozmieszczenie jednego diva w drugim

Question

Witam. Mam taką sytuację: https://codepen.io/kacper1445/pen/XRbzWV

Chciałbym, żeby div .about-me-content był w umiejscowiony w połowie wysokości diva .about-me, jednak przy zachowaniu długości na całym ekranie. Przy użyciu flexa align-items: center; div .about-me-content nie zachowuje długości na cały ekran.

Answer 1

Witaj do diva w css . about.me.content dodaj

position: relative;
top: 50%;
transform: translateY(-50%);

Powinno pomoc

Answer 2

o co chodzi z tym zachowaniem długości na całym ekranie?

Answer 3

Do klasy .about-me-content przypisz width: 100vw; też powinno pomóc.

Answer 4

Witam.

.about-me
{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}

.about-me-content
{
    color: #ffffff;
    font-weight: 500;
    background-color: #5f5f5f;
    padding: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    vertical-align:middle;
    width: 50%;
}

.about-me-content h2
{
    font-size: 40px;
    text-decoration: underline #7862fc;
    margin-top: 0;
}

.about-me-content p
{
    font-size: 25px;
    width: 500px;
    text-align: center;
}