Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq.
Below is my ReactJS snippet:
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 </p>
<div prefetch href="/">
<a>/Home</a>
</div>
<br />
<p>Go to </p>
<div prefetch href="/letchat">
<a>/Letchat</a>
</div>
</div>
</div>
</div>
)
}
}
And here is my CSS snippet:
.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;
}
If you have any hints or suggestions, they would be greatly appreciated. Thank you!