如何修改CSS使左右div在中间容器与屏幕对应边缘间水平居中

实现方案 #

修改后的CSS代码 #

body {
  position: relative;
  font-size: 30px;
}

#middle {
  width: 420px;
  height: 500px;
  margin: 100px auto 0;
  border: solid;
}

#left {
  position: fixed;
  border-style: solid;
  border-color: red;
  top: 50%;
  transform: translate(-50%, -50%);
  left: calc(25vw - 105px);
}

#right {
  position: fixed;
  border-style: solid;
  border-color: blue;
  top: 50%;
  transform: translate(50%, -50%);
  right: calc(25vw - 105px);
}

核心修改说明 #

• 中间#middle元素宽度为420px，水平居中状态下，左右两侧的空闲区域宽度均为 (100vw - 420px) / 2 = 50vw - 210px，区域中心距离同侧屏幕边缘的距离为该值的一半，即 25vw - 105px
• 左侧元素设置left: calc(25vw - 105px)后，配合transform: translateX(-50%)让元素自身中心与左侧空闲区域的中心点对齐，实现水平居中
• 右侧逻辑与左侧对称，设置right: calc(25vw - 105px)，配合transform: translateX(50%)实现右侧区域内居中

小屏适配补充 #

如果需要适配视口宽度小于420px的场景，可以添加媒体查询避免左右元素移出屏幕：

@media (max-width: 420px) {
  #left {
    left: 10px;
    transform: translateY(-50%);
  }
  #right {
    right: 10px;
    transform: translateY(-50%);
  }
}

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