Flex垂直对齐失效仅水平对齐生效，网页按钮屏幕居中问题求助

我正在为网站制作按钮，希望通过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>

我已为body标签设置display: flex属性，目前仅实现了水平居中，垂直居中未生效，请问该如何解决？

嘿，这个问题我之前也碰到过！原因其实很简单：body元素默认并没有占满整个浏览器视口的高度，你设置的align-items: center是在body的高度范围内垂直居中，但body现在的高度只够包住按钮，自然看不到垂直居中的效果。

给你两个关键修改点，就能搞定：

1. 给html和body设置足够的高度，让它们覆盖整个视口
2. 去掉默认的外边距，避免出现不必要的滚动条

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 修复了viewport的width属性 -->
<title>Document</title>
<style>
html, body {
  margin: 0; /* 移除默认的边距 */
  min-height: 100vh; /* 让元素高度至少等于视口高度 */
}
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>

额外提一句：你原来的viewport标签里width=后面是空的，我改成了width=device-width，这能让页面在移动端适配更合理哦。

再解释下为什么这么改：

• min-height: 100vh：vh是视口高度单位，100vh就是当前浏览器窗口的整个高度。用min-height而不是固定的height，是为了如果页面内容超过视口高度时，元素能自动往下延伸，不会出现内容被截断的情况。
• 必须给html也设置高度，因为body的高度默认是由内部内容撑开的，它的父元素html如果没有明确的高度，body的高度设置就没有参考基准，自然无法占满视口。

这样改完之后，按钮就能稳稳地居中在屏幕正中央啦！

内容的提问来源于stack exchange，提问作者danidoco