I am having trouble centering text in the middle of my screen. Despite my efforts, it seems like it's not working as expected. Would someone be able to review the following index.html code and point out where I might be going wrong?
<!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>
The issue appears to be with my understanding that the flex-layout fills all available space. With a "column" direction, I anticipated the outer container to take up the entire height of the screen, but this doesn't seem to be the case.
Update:
To illustrate the problem when setting the outer-container height to 100vh, I have now included a parent-container. The height of 100vh is causing an overflow as the correct height should be 100vh minus the header's height.