Vertically centring a div containing two text areas [duplicate] - css

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I'm really struggling to vertically centre my div, which is currently serving as a container for two text areas. I have two text areas within my div, positioned side by side how I want it, and I would like them to retain their relative position to eachother, but, be vertically in the very middle of the screen. How can I do this?
App.js
class App extends React.Component {
state = {
character: null
};
render() {
return (
<div className="Centre">
<div className="Left">
<TextBox
/>
</div>
<div className="Right">
<textarea
className="Box"
placeholder={"English translation"}
value={this.state.english}
/>
</div>
</div>
);
}
}
export default App;
App.css
.Box {
height: 100px;
width: 98%;
padding: 1%;
border: solid 1px orange;
}
.Centre {
width: 800px;
height: 400px;
margin: 0 auto;
}
.Left {
width: 300px;
height: 200px;
float: left;
border: red;
}
.Right {
width: 300px;
height: 200px;
float: Right;
border: red;
}
textbox.jsx
class TextBox extends React.Component {
render() {
return (
<form>
<textarea
className="Box"
placeholder="Type in Spanish"
value={this.props.equation}
type="text"
name="equation"
/>
</form>
);
}

Answer 1

Change your css code
.Box {
height: 100px;
width: 98%;
padding: 1%;
border: solid 1px orange;
}
.Centre {
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
.Left {
width: 300px;
border: red;
}
.Right {
width: 300px;
border: red;
}
Live Demo

Answer 2

If i got your question right, you can use flex and center them in the middle of the div:
.Centre {
display: flex;
align-items: center;
}

Answer 3

You can use flexbox with align-items on parent class Centre:
display: flex;
align-items: center.

Answer 4

<div id="container">
<div class="textarea-wrapper">
<textarea>text 1</textarea>
<textarea>text 2</textarea>
</div>
</div>
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.textarea-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}