如何在当前场景下实现Container Div的垂直水平居中？

Got it, let's resolve that centering problem for you! The issue with your initial attempt to use flex on the <body> is that the body element doesn't automatically take up the full height of the viewport. Without that, vertical alignment properties don't have any space to work with. Here's the straightforward fix:

Updated CSS Code #

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Make sure html/body cover the full viewport height */
  font-family: "Karla", sans-serif;
  background: lightblue;
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
}
.container {
  width: 300px;
  height: 800px;
  border: 1px red solid;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Optional: stacks internal content vertically */
}

What Changed & Why #

• min-height: 100vh on html and body: This ensures both elements span the full height of the user's screen, giving the flex alignment a proper anchor. Using min-height instead of height lets the page expand if content ever exceeds the viewport height.
• Flex properties on body: Turning the body into a flex container with display: flex, then adding justify-content: center and align-items: center automatically centers its direct child (your .container) in both directions. You don't even need margin: 0 auto anymore, though it won't break anything if you keep it.
• Optional flex-direction: column on .container: Your original .container uses flex but defaults to row direction. Adding this will stack your header and main content vertically inside the container, which makes sense for your HTML structure.

If you prefer to stick with margin: 0 auto for horizontal centering and just fix the vertical issue, here's an alternative approach (though flex is cleaner):

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Karla", sans-serif;
  background: lightblue;
  position: relative;
}
.container {
  width: 300px;
  height: 800px;
  border: 1px red solid;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Either method will get your container perfectly centered on the page!

内容的提问来源于stack exchange，提问作者user16915455