ReactJS - CSS Flexbox: я установил flexbox для выравнивания своих элементов, но моя страница не может быть расположена вертикально по центру

Question

Я установил flexbox для выравнивания своих элементов, но моя страница не может быть расположена вертикально по центру.Я не могу понять, почему, поскольку у меня есть даже контейнер для моей страницы, я должен обеспечить размер brut и с единицами просмотра.Итак, вот моя песочница: https://codesandbox.io/s/rlk3j68pmq.

Вот мой фрагмент реакции:

class App extends Component {


  state = {
    name: "",
    message: "",

    messageStock: []
  } 

  render() {
    return (
      <div className={style.page}>
        <div className={style.page_container}> 

          <div className={style.form_container}>
            <form onSubmit={this.emitMessage} > 
              <input
                name="message"
                type="text"
                placeholder="message"
                value={this.state.message}
                onChange={this.handleChange}
              />
              <input type="submit" value="Send" />
            </form>
          </div>
          <div
            className={style.link}
          >
            <p>Go to&nbsp;</p>
            <div prefetch href="/">
              <a>/Home</a>
            </div>

            <br />

            <p>Go to&nbsp;</p>
            <div prefetch href="/letchat">
              <a>/Letchat</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Вот мой фрагмент CSS:

.page{ 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255);  
}

.page_container{
      padding: 5vh 3vw;
}

.page .form_container{ 
    height: 100%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page form input[type="text"]{ 
    height: 10vh;
    width: 30vw;
}
.message_box{ 
    background: white; 
    height: 40vh;
    width: 70vw;
    margin:auto;
    border:solid greenyellow; 
    margin-bottom: 5vh;
    overflow: scroll;
}

.message_item{ 
    margin: 2vh 0; 
}

.link{ 
    display:inline-block; 
}

Любая подсказка будет отличнойспасибо

Answer 1

.page{ 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255); 

    /*add following to center align content vertically */ 
    display:flex;
    align-items: center;/*vertically align page_container*/
    justify-content:center/*horizontally align page_container*/
}

.page_container{
      padding: 5vh 3vw;

      /* add following to center align content of page_container horizontally*/
      text-align:center
}

Добавьте вышеуказанные правила в файл styles.modules.css.

Ссылка Codesandbox: https://codesandbox.io/s/olrvozl2z5?codemirror=1&fontsize=14

Answer 2

Чтобы выровнять содержимое по вертикали, вам необходимо добавить последние несколько строк в styles.module.css :

.page { 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255);

    /* Added the following */
    display: flex;
    flex-direction: column;
    align-items: center;      
}

codesandbox