title: Positioning form input in React
body: <p>I am building a login page with react, and here is what I have got</p>
  
  <pre><code>class Landing extends Component {
    state = {
      box: {
        width: "300px",
        height: "100px",
        margin: "0 auto",
        border: "1px solid blue",
        textAlign: "center",
        verticalAlign: "middle",
        lineHeight: "90px",
        backgroundColor: "white",
      },
  
      landingBody: {
        backgroundColor: "#ccffff",
        height: `100vh`,
        width: `100vw`,
        display: `flex`,
        alignItems: `center`,
        justifyItems: `center`,
      },
    };
  
    getForm() {
      return (
        &lt;form&gt;
          &lt;label for="fname"&gt;First name:&lt;/label&gt;
          &lt;input type="text" id="fname" name="fname" size="50" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;label for="pin"&gt;PIN:&lt;/label&gt;
          &lt;input type="text" id="pin" name="pin" maxlength="4" size="4" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input type="submit" value="Submit"&gt;&lt;/input&gt;
        &lt;/form&gt;
      );
    }
  
    render() {
      return (
        &lt;div style={this.state.landingBody}&gt;
          &lt;div style={this.state.box}&gt;{this.getForm()}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Landing;
  </code></pre>
  
  <p>I want the box to be in the center of the page, and the username and pin textboxes well inside the box. But the textboxes overflows way out of the containing box. Also, the shape is a bit wierd. </p>
  
  <p>Please help.</p>