如何实现HTML元素居中及窗口缩放时的自适应定位？

完全不需要JavaScript，仅用HTML和CSS就能实现你要的布局效果，以下是具体实现方案：

核心布局思路 #

借助Flexbox弹性布局实现元素对齐与响应式适配：

• 外层容器设置display: flex开启弹性布局，搭配flex-wrap: wrap允许空间不足时自动换行，align-items: center保证垂直方向居中，justify-content: center实现换行后元素整体居中。
• 将用户名和按钮封装在一个子容器中，该子容器同样使用flex布局，通过flex: 1占据剩余空间，justify-content: space-between让用户名靠左、按钮靠右，确保两者始终处于同一行。

修改后的完整代码 #

<div class="container">
  <div class="avatar"></div>
  <div class="user-info">
    <label><b>User Name</b></label>
    <button>add friend</button>
  </div>
</div>

<style>
.container {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 15px; /* 头像与用户信息区的间距 */
}

.avatar {
  height: 140px;
  width: 140px;
  background-color: red;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 200px; /* 设置最小宽度，避免元素过度挤压 */
}

button {
  padding: 8px 16px;
}
</style>

效果说明 #

1. 按钮与用户名同行靠右：通过user-info容器的justify-content: space-between属性，让用户名和按钮分别占据容器左右两端，自然保持同一行对齐。
2. 响应式换行与居中：外层container的flex-wrap: wrap会在窗口宽度不足时自动换行；justify-content: center确保换行后的元素整体居中。
3. 无需JS干预：Flexbox原生支持响应式布局，不需要通过JavaScript检测窗口尺寸来手动调整元素位置。

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