我试图将文本居中显示在屏幕中间。由于某种原因，它不起作用。有人能看一下下面的index.html并向我解释我做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
</body>
</html>我以为flex-layout会填满所有可用的空间，因为我的flex-direction是"column"，所以我希望外部容器会填满整个屏幕的高度，但显然事实并非如此。
更新：
现在我已经将外部容器和内部容器放置在父容器中，以展示将外部容器的高度设置为100vh时遇到的问题：正如您所看到的，问题是100vh的高度对于我的外部容器来说太高了-正确的高度应该是100vh减去标题的高度。
3条答案
按热度按时间q43xntqr1#
在两个容器上添加
justify-content: center;uklbhaso2#
你的容器没有占据屏幕的所有高度，垂直对齐也没有了。下面是带有垂直和水平对齐的codepen https://codepen.io/ignasb/pen/KKBQzjQ。我添加了高度和对齐css属性
此外，如果滚动条出现，您可能需要其他样式。
enxuqcxy3#
快速而粗略的解决方案是创建包含
body、.outer-container或某个.wrapper的父容器，用height: 100%或100vh填充整个视口，最后减去同一容器中其他元素的高度，并使用下面的CSS将其内容居中。x一个一个一个一个x一个一个二个x