clairechabas/index.html

## 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>Center Content Vertically in the Remaining Screen Space</title>

    <style>
      html,
      body {
        /* 1. the `html` and `body` must be able to grow to fill the entire viewport */
        min-height: 100vh;
        height: 100%;
      }

      .container {
        /* 2. the container must be able to grow to fill the entire viewport */
        min-height: 100vh;
        height: 100%;

        /* 3. and must be a flex container */
        display: flex;
        flex-direction: column;
      }

      main {
        /* 4. the main content must be able to grow to fill the remaining space */
        height: 100%;
        flex-grow: 1;

        /* 5. Center the content vertically inside main */
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* The rest is just for styling purposes */
      html,
      body {
        margin: 0;
        padding: 0;
      }
      header,
      main {
        background-color: #f1f1f1;
        border: 2px solid black;
        border-radius: 8px;
        padding: 30px;
        margin: 20px;
        font-family: "Trebuchet MS", Tahoma, sans-serif;
        font-weight: 600;
        font-size: 24px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>Header</header>
      <main>
        <p>Main</p>
        <p>
          I'm some content who wants to be centered<br />vertically in the
          remaining space
        </p>
      </main>
    </div>
  </body>
</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>Center Content Vertically in the Remaining Screen Space</title>

	<style>
	html,
	body {
	/* 1. the `html` and `body` must be able to grow to fill the entire viewport */
	min-height: 100vh;
	height: 100%;
	}

	.container {
	/* 2. the container must be able to grow to fill the entire viewport */
	min-height: 100vh;
	height: 100%;

	/* 3. and must be a flex container */
	display: flex;
	flex-direction: column;
	}

	main {
	/* 4. the main content must be able to grow to fill the remaining space */
	height: 100%;
	flex-grow: 1;

	/* 5. Center the content vertically inside main */
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	/* The rest is just for styling purposes */
	html,
	body {
	margin: 0;
	padding: 0;
	}
	header,
	main {
	background-color: #f1f1f1;
	border: 2px solid black;
	border-radius: 8px;
	padding: 30px;
	margin: 20px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-weight: 600;
	font-size: 24px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>Header</header>
	<main>
	<p>Main</p>
	<p>
	I'm some content who wants to be centered<br />vertically in the
	remaining space
	</p>
	</main>
	</div>
	</body>
	</html>