如何让div完全居中于网页？flex布局未达预期问题排查

你当前的代码没实现完全居中，核心问题有两个：

• body元素默认没有占据整个视口的高度，flex布局的垂直居中需要容器有明确高度才能生效
• 只给body设置了justify-content: center（水平居中），缺少垂直居中的align-items: center属性

另外，浏览器默认会给html和body添加margin，可能导致页面出现留白，需要一并重置。

修改后的完整CSS代码 #

/* 重置html和body默认内外边距，消除页面留白 */
html, body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  /* 添加垂直居中属性 */
  align-items: center;
  /* 让body占满整个视口高度，为垂直居中提供空间 */
  min-height: 100vh;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  width: 50vh;
  height: auto;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  display: flex;
  padding: 10px;
  margin-top: 10px;
}

关键修改说明 #

1. html, body { margin: 0; padding: 0; }：清除浏览器默认样式，避免页面四周出现不必要的留白
2. min-height: 100vh：让body至少覆盖当前视口的全部高度，确保垂直居中的空间生效
3. align-items: center：配合justify-content: center，让子元素在水平和垂直两个方向都居中

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