CODEWITHSUNDEEP
cssreactjsflexbox
Diagathe Josué
Diagathe Josué

Reputation: 11966

ReactJS - CSS Flexbox: I have set a flexbox to align my elements but my page fails to vertically center

I have set a flexbox to align my elements but my page fails to vertically center. I can't figure out why since I have even a container for my page, I have ensure brut-size with viewport's units also. So here my sandbox: https://codesandbox.io/s/rlk3j68pmq.

Here my reactjs snippet:

class App extends Component {


  state = {
    name: "",
    message: "",

    messageStock: []
  } 

  render() {
    return (
      <div className={style.page}>
        <div className={style.page_container}> 

          <div className={style.form_container}>
            <form onSubmit={this.emitMessage} > 
              <input
                name="message"
                type="text"
                placeholder="message"
                value={this.state.message}
                onChange={this.handleChange}
              />
              <input type="submit" value="Send" />
            </form>
          </div>
          <div
            className={style.link}
          >
            <p>Go to&nbsp;</p>
            <div prefetch href="/">
              <a>/Home</a>
            </div>

            <br />

            <p>Go to&nbsp;</p>
            <div prefetch href="/letchat">
              <a>/Letchat</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

here my css snipet:

.page{ 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255);  
}

.page_container{
      padding: 5vh 3vw;
}

.page .form_container{ 
    height: 100%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page form input[type="text"]{ 
    height: 10vh;
    width: 30vw;
}
.message_box{ 
    background: white; 
    height: 40vh;
    width: 70vw;
    margin:auto;
    border:solid greenyellow; 
    margin-bottom: 5vh;
    overflow: scroll;
}

.message_item{ 
    margin: 2vh 0; 
}

.link{ 
    display:inline-block; 
}

Any hint would be great, thanks

Upvotes: 0

Views: 823

Answers (2)

Srijan
Srijan

Reputation: 257

.page{ 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255); 

    /*add following to center align content vertically */ 
    display:flex;
    align-items: center;/*vertically align page_container*/
    justify-content:center/*horizontally align page_container*/
}

.page_container{
      padding: 5vh 3vw;

      /* add following to center align content of page_container horizontally*/
      text-align:center
}

Add the above rules to styles.modules.css file.

Codesandbox link: https://codesandbox.io/s/olrvozl2z5?codemirror=1&fontsize=14

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19111

To vertically align the content, you would need to add these last few lines in styles.module.css:


.page { 
    width: 100vw;
    height: 100%;
    min-height: 100vh; 
    background: rgb(219, 101, 255);

    /* Added the following */
    display: flex;
    flex-direction: column;
    align-items: center;      
}

codesandbox

Upvotes: 1

Related Questions