Question 43181 in Html Question posted in
Some basic documentation can be found here.

The center alignment for CSS items is not functioning – Html

I’m having trouble understanding why the align-items: center; property didn’t work in my code. Could someone kindly help me to understand why it didn’t work? TIA!

My code:

html {
  -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;  /* Opera/IE 8+ */
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  height: 100%;
}

#registration-page {
  height: 100%;
  background: #78a7ba;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: scroll;
}
<body>
  <section id="registration-page">
    <form class="signup-form">
      Registration Form
    </form>
  </section>
</body>
Tags:

2

Answers


  1. 0

    If you are trying to center the text vertically height: '100%' isn’t enough because it simply takes the full size of the content.
    If you want the full screen change it to height: '100vh'

    Login or Signup to reply.
  2. 0

    You are missing the body element between html and your element. It’s not the full screen size so your elements 100% are not taking the full screen.

    This is how you could fix it:

    html {
  min-height: 100vh;
}

body {
  height: 100%;
}

.your-element {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

    OR

    html, body {
  height: 100%;
}

.your-element {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search