CSS Flexbox设置后div元素重复显示问题求助

问题根源 #

你使用了全局div选择器设置样式，这会让页面中所有div元素都套用这套样式，包括你没留意到的其他div（比如编辑器自动生成的隐藏元素），最终呈现出两个相邻div的效果。

修复步骤 #

1. 给目标容器添加类名：避免全局样式污染，仅给需要的div应用样式。
2. 调整Flex属性实现正确居中：Flex布局里justify-self对项目不生效，要让容器内的img水平垂直居中，给容器设置justify-content:center和align-items:center即可。

修改后的代码 #

CSS部分

body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; /* 可选：让容器在页面中垂直居中 */
}

img {
  width: 200px;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

/* 用类选择器替代全局div选择器 */
.image-container {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
  justify-content: center; /* 水平居中img */
  align-items: center; /* 垂直居中img */
}

HTML部分

<div class="image-container">
  <img src="picture.jpg" alt="">
</div>

补充说明 #

• 全局选择器（如div、p）尽量少用，容易引发样式冲突，优先使用类选择器。
• Flex布局中，容器的justify-content控制主轴方向对齐，align-items控制交叉轴方向对齐，项目的align-self可单独覆盖容器的align-items设置，但justify-self在Flex布局中无有效用法。

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