如何在CSS中固定元素位置，不受窗口尺寸及显示器影响？

你的问题核心在于固定定位元素的居中逻辑和固定尺寸设置：

• .main 使用固定像素的宽高和外边距，屏幕尺寸变化时无法自适应，直接导致位置偏移。
• 固定定位（position: fixed）的元素用固定 margin 居中，当屏幕宽度小于「盒子宽度+左右margin总和」时，元素会直接超出可视区域，无法维持居中状态。

修正方案 #

1. 用transform实现固定定位元素的自适应居中：通过left: 50% + transform: translateX(-50%) 实现水平居中，这种方式基于元素自身宽度计算偏移，无论屏幕尺寸如何都能稳定居中。
2. 替换固定宽高为自适应配置：用max-width/max-height限制最大尺寸，配合百分比宽度实现小屏幕自动收缩。
3. 改用相对单位设置内边距：用vw、百分比等相对单位代替固定像素，保证不同屏幕下的布局比例一致。

修改后的代码 #

CSS

.main {
  display: flex;
  position: fixed;
  /* 自适应宽高：大屏幕保持原尺寸，小屏幕自动收缩 */
  max-width: 1280px;
  width: 90%;
  max-height: 1036px;
  height: 90vh;
  /* 相对单位设置内边距，维持原比例 */
  padding: 0 7.5vw 0 7.5vw; /* 原96px/1280px=7.5%，转vw单位 */
  border: 2px solid red;
  z-index: 3;
  /* 固定定位元素的自适应居中逻辑 */
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.header {
  position: relative;
  justify-content: center;
  align-items: center;
  /* 继承父容器高度，保持自适应 */
  height: 100%;
  /* 按原比例设置宽度，同时限制最大宽度 */
  width: 41.25%;
  max-width: 528px;
  z-index: 3;
  border: 2px solid white;
  /* 相对单位设置内边距 */
  padding: 3.3vw 0 6.3vw 0; /* 原35px/1036px≈3.3%，66px≈6.3% */
  overflow: hidden;
}

HTML

<section class="main">
  <section class="header">
  </section>
</section>

关键说明 #

• transform: translateX(-50%) 是固定定位元素居中的可靠方案，不会受屏幕宽度限制，始终基于元素自身宽度调整偏移量。
• max-width/max-height 确保大屏幕下保持你需要的固定尺寸，小屏幕时自动收缩，避免元素溢出可视区域。
• 相对单位的使用让内边距、宽度比例在任何屏幕下都保持一致，彻底解决不同显示器/全屏模式下的位置错位问题。

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