0

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>
blurfus
  • 13,485
  • 8
  • 55
  • 61
DailyFun
  • 31
  • 3

2 Answers2

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'

ZAAM Oussama
  • 68
  • 10
  • To my understanding, setting the `height: 100%;` property in CSS means that the height of the element is relative to the height of its parent element. However, in my case, I have already applied `height: 100%;` to the parent element, which means that the child element's height will also be relative to the same parent element. – DailyFun Apr 02 '23 at 15:39
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;
}
Sebi
  • 398
  • 3
  • 10
  • How does applying the `height: 100%;` to the html {} selector differ from applying it to the body {} selector in CSS? Sorry I'm new to HTML and CSS. – DailyFun Apr 02 '23 at 17:28
  • They are two sseperate elements. `body` is nested inside `html` so it is basically it's child. – Sebi Apr 02 '23 at 18:12