如何使用CSS或Bootstrap实现按钮在图片上全视口下始终居中？

你当前代码需要写大量媒体查询的核心原因是.hero-btn-div使用了固定比例的left: 42%偏移，没有适配元素自身宽高，视口变化时偏移比例就会失效。

最优解决方案 #

仅需修改.hero-btn-div的定位逻辑，用CSS transform实现自适应居中，无需任何媒体查询：

/* 仅修改.hero-btn-div的样式即可，其他代码保持不变 */
.hero-btn-div{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 向左、向上偏移元素自身宽高的50%，抵消top和left的偏移偏差，实现精准居中 */
  transform: translate(-50%, -50%);
  display: inline-block;
}

完整可运行代码 #

<style>
 .hero-container{
    position: relative;
    text-align: center;
  }
  .hero-btn-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
  }
 .hero-btn{
    background-color: transparent;
    font: var(--main-sans-serif);
    font-size: 1.2em;
    border: 1px solid black;
    border-radius: 100px;
    width: 300px;
    height: 50px;
    cursor: pointer;
  }
</style>
<div class="hero-container">
  <img src="images/dream%20of%20winter%20cut.jpg" class="img-fluid" width="1920px" alt="Artwork">
  <div class="hero-btn-div"><a href="#"><button class="hero-btn">Button</button></a></div>
</div>

可选替代方案（Flex布局） #

如果你不想用transform，也可以给父容器开启flex布局实现居中：

.hero-container{
  position: relative;
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
}
/* .hero-btn-div不需要额外加定位属性，保留原有其他样式即可 */
.hero-btn-div{
  position: absolute;
  display: inline-block;
}

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