Flex垂直对齐不起作用，只有水平对齐起作用[重复]答案

【问题标题】：Flex vertical align is not working, only horizontal align is working [duplicate]Flex垂直对齐不起作用，只有水平对齐起作用[重复]
【发布时间】：2021-04-06 15:27:33
【问题描述】：

我正在为我的网站制作一个按钮。我想将屏幕中间的按钮与 flexbox 对齐。但它不能正常工作:(

我试过了。

<!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>

我将 display flex 属性应用于 body 标签。

结果：Screenshot 1

我想要垂直对齐和水平对齐，但只有水平对齐有效。

我想要的：Screenshot 2

有什么解决办法吗？

【问题讨论】：

标签： html css

【解决方案1】：

你在正确的轨道上，它实际上是居中的！如果您打开开发工具，您会注意到 body 元素默认不会填充屏幕的高度。将 min-height: 100vh 添加到 body 将强制其为 100% 高度，从而使您的按钮相对于屏幕居中。

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;
}

&lt;button id="click-btn"&gt;Click Me&lt;/button&gt;

【讨论】：