使用Flexbox无法居中目标div，仅其子元素受影响问题求助

你当前的CSS是让.card内部的img在这个黑色div里居中，而不是让.card本身在页面（或它的父容器）里居中——这就是核心问题。

解决方案一：给父容器（比如body）设置flex布局 #

给.card的父元素（默认是body）添加样式，让它成为flex容器来控制.card的位置：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 让body占满整个视口高度，确保垂直方向也能居中 */
  margin: 0; /* 清除body默认的外边距 */
}

/* 保留你原来的.card样式 */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: black;
}

解决方案二：给.card设置margin: auto #

如果父容器是块级元素（比如body），可以直接给.card添加自动外边距，前提是父容器有足够的高度来实现垂直居中：

body {
  min-height: 100vh;
  margin: 0;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: black;
  margin: auto; /* 自动外边距会让元素在父容器中水平垂直居中 */
}

为什么原来的代码没效果？ #

你写的justify-content和align-items是作用在.card这个flex容器内部的，它们的作用是调整容器子元素的位置，而不是容器自身在父元素中的位置。要让.card整体居中，必须从它的父容器入手，或者利用自动外边距的特性。

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