Flex垂直对齐不起作用，只有水平对齐起作用[重复]
Posted
技术标签:
【中文标题】Flex垂直对齐不起作用，只有水平对齐起作用[重复]【英文标题】：Flex vertical align is not working, only horizontal align is working [duplicate] 【发布时间】：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
有什么解决办法吗？
【问题讨论】：
【参考方案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;
<button id="click-btn">Click Me</button>【讨论】：
以上是关于Flex垂直对齐不起作用，只有水平对齐起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章