Tentei Fazer a section ocupar 100vh mas não consigo centralizar verticalmente | HTML e CSS: praticando HTML/CSS

Na aula a instrutora não pedriu pra fazer isso, mas pensando que todas as sections deveriam ter o tamanho da viewport, adicionei um 100vh na última section antes do footer, porém não consigo centralizar conteúdo de forma vertical na pagina.

Tentei usar o mesmo método das sessões anteriores com align-itens mas não funcionou.

O que estou fazendo errado? Teria como fazer isso?! Obrigado.

(https://cdn1.gnarususercontent.com.br/1/3970893/37038875-669e-446d-9806-99abaec06c50.png)

Aqui o html e css usado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <link rel="stylesheet" href="reset.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Plus</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img class="container__imagem" src="./assets/Combo.png" alt="O combo+ é a junção do alura e o alura língua">
            <a class="container__botao" href="www.alura.com.br">Assine por 12x de R$ 120,00*</a>
            <a class="container__botao botao__secundario" href="www.alura.com.br">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>

    <section class="container secundario">
        <img src="./assets/Plataformas.png" alt="Imagem contendo a pagina incial do Alura combo" class="secundario__imagem">
        <div>
            <h2 class="secundario__titulo">Assista do seu jeito</h2>
            <p class="secundario_paragrafo">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
        </div>

    </section>

    <section class="container secundario">
        <div>
            <p class="secundario_paragrafo">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
            <a class="container__botao botao_menor" href="www.alura.com.br">Assine o Combo+</a>
         </div>
        
            <img src="./assets/Telas.png" alt="Telas do Alura+ e Alura Línguas" class="secundario__imagem">
        
    </section>

    <section class="container secundario">
        <img src="./assets/Notebook.png" alt="Notebook aberto na págia da Alura" class="secundario__imagem">
        <div>
            <h2 class="secundario__titulo">Baixe seus cursos</h2>
            <p class="secundario_paragrafo">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
        </div>

    </section>

    <section class="dispositivos">
        <h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
        <ul class="dispositivos__lista">
            <li>
                <img src="./assets/tv.png" alt="icone tv">
                <h3 class="lista__item">TV</h3>
            </li>
            <li>
                <img src="./assets/computador.png" alt="Ícone computador">
                <h3 class="lista__item">Computador</h3>
            </li>
            <li>
                <img src="./assets/celular.png" alt="Ícone celular">
                <h3 class="lista__item">Celulares e tablets</h3>
            </li>

        </ul>

    </section>
</body>
</html>

.dispositivos{
    height: 100vh;
    text-align: center;
    align-items: center;
}

.dispositivos__titulo{
    font-size: 3em;
    font-weight: 700;
    /* margin-bottom: 2em; */
}
.dispositivos__lista{
    display: flex;
    justify-content: center;
    margin: 4em 0;
    list-style-type: none;
}

.lista__item{
    margin: .5em;
    font-size: 2em;
    font-weight: 700;
    /* line-height: 120%; */
}

Fala, Daniel! Tudo bom contigo?

Então, cara, nessa parte, eu não recomendo colocar o height de 100vh, porque esse container do HTML não vai ocupar toda a tela, ao fim do projeto, já que ainda vai ser colocado um outro container com o footer, logo em seguida. Assim que você colocar o footer, você vai ter uma noção melhor de como vai ficar, e daí é só acertar alguma coisa ou outra alterando espaçamentos e tamanhos de fonte, se quiser. Eu mesmo não coloquei nenhuma propriedade CSS que fizesse o alinhamento dos itens no centro da página. Mas de qualquer forma, vou deixar meu código dessa parte aqui pra você também dê uma olhada:

 <section class="dispositivos">

        <h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
        <ul class="dispositivos__lista">

            <li>
                <img src="img/tv.png" alt="Ícone TV">
                <h3 class="lista__item">TV</h3>
            </li>
            <li>
                <img src="img/computador.png" alt="Ícone Computador">
                <h3 class="lista__item">Computadores</h3>
            </li>
            <li>
                <img src="img/celular.png" alt="Ícone Celular">
                <h3 class="lista__item">Celulares e Tablets</h3>
            </li>

        </ul>

    </section>

.dispositivos{
    text-align: center;
}

.dispositivos__titulo{
    font-size: 48px;
    font-weight: 700;
    color: var(--branco_principal);
}

.dispositivos__lista{
    list-style-type: none;
    display: flex;
    justify-content: center;
    margin: 5em 0;
}

.lista__item{
    font-size: 32px;
    font-weight: 700;
    color: var(--branco_principal);
}

Espero ter ajudado, meu amigo! Bons estudos e abraços!

Chegou a hora de transformar