求助：如何让网页元素在任意屏幕尺寸下居中（已尝试flexbox）

你的核心问题是：所有.box都是绝对定位且直接相对于body定位，没有统一的相对定位父容器，导致无法整体居中；另外你写的居中CSS类未在HTML中应用，完全没生效。结合你的鼠标交互逻辑，可按以下方式修改：

关键调整思路 #

1. 给所有盒子套一个相对定位的父容器，让盒子的绝对定位以该容器为基准
2. 用Flex布局让父容器在屏幕水平、垂直方向都居中
3. 调整盒子的初始定位值，保持原有布局结构的同时以父容器为参照

修改后的完整代码 #

HTML #

<html>
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<body>
  <div class="container">
    <div class="box_1 box"></div>
    <div class="box_2 box"></div>
    <div class="box_3 box"></div>
    <div class="box_4 box"></div>
    <div class="box_5 box"></div>
    <div class="box_6 box"></div>
    <div class="box_7 box"></div>

    <div class="box_15 box"></div>
    <div class="box_16 box"></div>
    <div class="box_17 box"></div>
    <div class="box_18 box"></div>
    <div class="box_19 box"></div>
    <div class="box_20 box"></div>
    <div class="box_21 box"></div>
  </div>
</body>
</html>

CSS #

/* 全局样式确保屏幕占满 */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 父容器：作为盒子的定位基准 */
.container {
  position: relative;
  width: 400px;
  height: 150px;
}

.box {
  height: 4px;
  width: 4px;
  border-radius: 10%;
  font-size: 0px;
  transform: rotate(-2deg);
  background: #82eef6;
  position: absolute; /* 统一设置绝对定位，子类无需重复 */
}

.box_1 {
  top: 20px;
  left: 20px;
  animation-delay: .1s;
}

.box_2 {
  top: 20px;
  left: 70px;
  animation-delay: .2s;
}

.box_3 {
  top: 20px;
  left: 120px;
  animation-delay: .3s;
}

.box_4 {
  top: 20px;
  left: 170px;
  animation-delay: .4s;
}

.box_5 {
  top: 20px;
  left: 220px;
  animation-delay: .5s;
}

.box_6 {
  top: 20px;
  left: 270px;
  animation-delay: .6s;
}

.box_7 {
  top: 20px;
  left: 320px;
  animation-delay: .7s;
}

.box_15 {
  top: 70px;
  left: 20px;
  animation-delay: 0.13s;
}

.box_16 {
  top: 70px;
  left: 70px;
  animation-delay: 0.14s;
}

.box_17 {
  top: 70px;
  left: 120px;
  animation-delay: 0.1s;
}

.box_18 {
  top: 70px;
  left: 170px;
  animation-delay: 0.2s;
}

.box_19 {
  top: 70px;
  left: 220px;
  animation-delay: 0.3s;
}

.box_20 {
  top: 70px;
  left: 270px;
  animation-delay: 0.4s;
}

.box_21 {
  top: 70px;
  left: 320px;
  animation-delay: 0.5s;
}

JS #

var mouse = {
  'x': 0,
  'y': 0
};

homex = 0;
homey = 0;
forcex = 0;
forcey = 0;
magnet = 300;

$(document).bind('mousemove', function(e) {
  mouse = {
    'x': e.pageX,
    'y': e.pageY
  };
});

$('.box, .box2').each(function(index, el) {
  $(el).data("homex", parseInt($(el).position().left));
  $(el).data("homey", parseInt($(el).position().top));
});

setInterval(function() {
  $('.box, .box2').each(function(index, el) {
    el = $(el);
    position = el.position();
    x0 = el.offset().left;
    y0 = el.offset().top;
    x1 = mouse.x;
    y1 = mouse.y;
    distancex = x1 - x0;
    distancey = y1 - y0;

    distance = Math.sqrt((distancex * distancex) + (distancey * distancey));

    powerx = x0 - (distancex / distance) * magnet / distance;
    powery = y0 - (distancey / distance) * magnet / distance;

    forcex = (forcex + (el.data('homex') - x0) / 2) / 2.1;
    forcey = (forcey + (el.data('homey') - y0) / 2) / 2.1;

    el.css('left', powerx + forcex);
    el.css('top', powery + forcey);
    el.text(parseInt(distance));
  });
}, 25);

原代码问题说明 #

你之前尝试的Flex没效果，是因为：

• 写的居中CSS类未在HTML中使用
• 所有.box都是绝对定位，脱离了文档流，Flex无法直接控制这些元素的位置

通过套相对定位父容器的方式，既保留了鼠标交互的逻辑，又让整个盒子组能自适应各种屏幕尺寸居中。

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