Vertically centring a div containing two text areas

Question

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

@Franseco M. Yes, but I want them to be in the middle of the screen, not at the very top — Perplexityy, Dec 15 '19 at 09:46

score 1 · Accepted Answer · answered Dec 15 '19 at 10:16

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

score 0 · Answer 2 · answered Dec 15 '19 at 09:48

0

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

answered Dec 15 '19 at 09:48

Ertan Hasani

1,675
12
27

score 0 · Answer 3 · answered Dec 15 '19 at 09:51

0

You can use flexbox with align-items on parent class Centre:

display: flex; align-items: center.

answered Dec 15 '19 at 09:51

score 0 · Answer 4 · answered Dec 15 '19 at 10:07

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

Vertically centring a div containing two text areas

4 Answers4