垂直居中包含两个文本区域的 div

Question

我真的很难垂直居中我的div，它目前用作两个文本区域的容器。我的div 中有两个文本区域，并排放置，我希望它们彼此保持相对位置，但垂直位于屏幕的最中间。我该怎么做？

应用.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;

应用.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;
}

文本框.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

更改 CSS 代码

.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;
}

现场演示

Answer 2

如果我答对了你的问题，你可以使用 flex 并将它们居中在div 的中间：

.Centre {
display: flex;
align-items: center;
}

Answer 3

您可以在父类Centre上将flexbox与align-items一起使用：

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;
}