I am trying to center my div container with flexbox both horz and vert. I couldn't get it to work the way that tutorials and posts online were saying it should but I came across one post which had an extra html tag on top when setting the height of the body tag to 100%. I tried it to see what would happen and it worked. I am beyond confused right now, if there is anyone who can explain why adding that extra html tag on top allowed the div to be centered vertically please tell me because I am so lost.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site
properly based on user's device -->
<title>Frontend Mentor | Order summary card</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container"> <!-- flex container-->
<img class="image" src="images/illustration-hero.svg">
<div class="white">
<h2>Order Summary</h2>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!</p>
Annual Plan
$59.99/year
Change
Proceed to Payment
Cancel Order
</div>
</div>
</body>
</html>
CSS: (removing the html tag does not center the content vertically WHY)
html, body {
background-image: url("images/pattern-background-desktop.svg");
background-color: #E0E8FF;
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
width: 400px;
}
.white {
background-color: white;
width: 500px;
height: auto;
}
