HTML Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<div class="sheet" style="width:80%;max-width:1024px;height:400px;"></div>
</body>
</html>
CSS Code:
html,
body {
min-height: 100%;
margin: 0;
padding: 0
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sheet {
background-color: red
}
My expectation was to see a red rectangle floating in the center of the screen, but it ended up positioned at the top-middle instead.
Previously, it didn't work in Firefox, and it worked in Chrome until the DOCTYPE tag was added. But now, it no longer works in Chrome either.
I found that using height instead of min-height does work, but I prefer not to specify a fixed height value since I may need it to adapt to different screen sizes and content lengths.