Flex vertical align is not working, only horizontal align is working

Question

I'm making a button for my website. I want to align the button in the middle of the screen with flexbox. But it's not working properly :(

It's what I tried.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #click-btn {
        background-color: #00ff6b;
        border-radius: 100px;
        border: none;
        font-size: 50px;
        padding: 20px;
      }

      #click-btn:active {
        background-color: #00d358;
        font-size: 45px;
      }
    </style>
  </head>
  <body>
    <button id="click-btn">Click Me</button>
  </body>
</html>

I applied the display flex property to body tag.

Result: Screenshot 1

I wanted vertical align and horizontal align, but only horizontal align is working.

What I want: Screenshot 2

Any solution for this?

score 2 · Accepted Answer · answered Dec 30 '20 at 03:34

You're on the right track, and it actually is being centered! If you open dev tools, you'll notice that the body element doesn't fill the screen's height by default. Adding min-height: 100vh to the body will force it to be 100% height, thus centering your button relative to the screen.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#click-btn {
  background-color: #00ff6b;
  border-radius: 100px;
  border: none;
  font-size: 50px;
  padding: 20px;
}

#click-btn:active {
  background-color: #00d358;
  font-size: 45px;
}

<button id="click-btn">Click Me</button>

Flex vertical align is not working, only horizontal align is working

1 Answers1