如何使用Flex布局实现div元素的水平与垂直居中？

要让.box在.container内实现水平与垂直居中，只需给Flex容器（.container）添加两个核心属性即可：

• justify-content: center：控制子元素在水平主轴上的居中对齐
• align-items: center：控制子元素在垂直交叉轴上的居中对齐

修改后的完整代码 #

HTML

<div class="container">
  <div class="box"></div>
</div>

CSS

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  /* 新增两行实现居中 */
  justify-content: center;
  align-items: center;
  /* 可选：清除默认边距，避免视口出现滚动条 */
  margin: 0;
}

.box {
  width: 200px;
  height: 200px;
  border-radius: 0.5rem;
  background-color: #dddddd;
}

补充说明 #

• 容器必须设置明确高度（这里用100vh占满整个视口高度），否则垂直居中效果无法体现
• 这种方式对多个子元素同样生效，所有子元素会整体在容器内居中对齐

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