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

我真的很难将我的div垂直居中，它目前充当两个文本区域的容器。在我的div中有两个文本区域，按照我的要求并排放置，我希望它们保持彼此的相对位置，但垂直位于屏幕的正中间。我该怎么做

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;

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

class文本框扩展了React.Component{
render（）{
返回(
);
}
<代码> > p>如果你的问题是正确的，你可以使用Flex并把它们放在div的中间：

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

您可以将
flexbox
与父类
center
上的
align items
一起使用：

显示：flex；
对齐项目：居中。

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

文本1
文本2
#容器{
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.textarea包装器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
} 
更改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;
}

 
我不明白，你想要2个文本区域并排吗？你可以试试这个：@弗兰西科M。是的，但是我希望它们在屏幕中间，而不是在屏幕的中央。top@Perplexityy
.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;
}