css - ReactJS - CSS flexbox : I have set a flexbox to align my elements but my page fails to vertically center

Question

我已经设置了一个 flexbox 来对齐我的元素，但我的页面无法垂直居中。 我不明白为什么因为我什至有一个容器用于我的页面，所以我也确保了视口(viewport)单位的原始大小。 所以这里是我的沙箱:https://codesandbox.io/s/rlk3j68pmq .

这是我的 reactjs 片段:

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

要垂直对齐内容，您需要在 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