如何让占窗口50%宽的absolute定位元素与动态content wrapper对齐居中

实现方案 #

核心是用calc结合视口单位vw和相对父元素的百分比单位实现，不需要提前知道content wrapper的实际宽度，自动适配0~1330px的动态宽度范围。

前置基础假设 #

你的站点content wrapper基础样式如下（和常规站点实现一致）：

/* 全局通用规则，几乎所有站点都会预设 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content-wrapper {
  /* 你提到的最大宽度变量 */
  --wrapper-max-width: 1330px;
  /* 可选：内容容器左右内边距，根据你的实际需求调整，没有就设为0 */
  --wrapper-padding: 20px;
  
  max-width: var(--wrapper-max-width);
  margin-inline: auto; /* 水平居中 */
  padding-inline: var(--wrapper-padding);
}

横幅CSS代码 #

直接给横幅元素加如下样式即可：

.target-banner {
  /* 负margin将横幅左边缘拉到视口最左侧 */
  margin-left: calc(-50vw + 50%);
  /* 宽度占满视口的50% */
  width: 50vw;
  /* 左内边距将横幅内部内容推到和content wrapper内容左边缘对齐 */
  padding-left: calc(50vw - 50%);
  /* 你的自定义样式 */
  background: #a570ed; /* 示例紫色背景 */
  min-height: 120px;
}

原理解释 #

• 百分比单位50%是相对于父元素（即content wrapper）的内容宽度计算的
• 视口单位50vw是相对于当前窗口宽度的50%
• calc(-50vw + 50%)刚好等于content wrapper左边缘到视口左边缘的距离的负值，负margin可以直接把横幅拉到视口左边缘
• 内边距再补回同样的距离，就可以保证内部内容和content wrapper的内容左边缘完全对齐

效果参考 #

注意事项 #

如果你的content wrapper没有设置全局box-sizing: border-box，需要将横幅的padding-left额外加上var(--wrapper-padding)调整对齐即可。

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