Need Help Centering

I feel ashamed asking this… but I am trying to get my email container so that it is centered on the page. Don’t I just use justify-content? Can someone please help me?

Yeah, flexbox can sometimes be a headache. You got the right mindset that the flex info should be inside of the parent element, but you have to set the width to a child element. I added another div with a class of child, just for place holding, and put that around your header, heading, and form tags. In CSS I called the child class and set that to a width of 50% and voila! Centered in the middle of the page.

<div id="email-container">
  **<div class="child">**
  <h1>Join HyperX!</h1>
  <p>Sign up with your email address to receive deals and updates</p>
<form id="form" action="">
  <input type="email" required id="email" placeholder="Enter your email address"</input>
  <input id="submit" type="submit" value="Get Started" class="btn"</input>

#email-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;

  width: 50%;
  border: 1px solid black;
  text-align: center;

This video really helped me see the flexbox be used instead of just reading about it:

Haha thank you! That makes sense now. Also, thanks for the video, that’ll help

1 Like