无论屏幕大小如何，如何将徽标放置在其下方 div 的中间位置

Question

我需要在下面的 div 中间放置一个标志，如下图所示，我似乎无法让它完美。无论屏幕大小或浏览器大小如何，即使在调整浏览器大小时也需要中途。

我正在使用这样的定位

.site-icon {
  width: 15%;
  top: 6%;
  right: 11.9%;
}

该部分的 HTML

<div class="container-fluid page-container-2">
  <h1 class="page-title-2 small-header">
   <a href="/">SITE TITLE</a>
  </h1>

  <!-- This is the icon -->
  <a href="/"><img class="site-icon" src="/resources/img/icon.png" alt="site_title"/></a>

  <!-- this is the div holding the banner image -->
  <div class="col-xs-12 banner-image-container-2 no-pad" style="background: url({% resource banner_image['path'] %}) no-repeat center center;background-size:cover;"></div>

.... rest of the page ....

但是当浏览器垂直或水平缩小时它会失败，我只是不知道如何用 css 来实现这一点？

Answer 1

好吧，当我写我的答案时，你的问题中没有任何 HTML 代码，所以我想出了我自己的 - 但这也应该可以理解为你的问题的答案......（不会再改变了现在）

最重要的是结合position: relative（对于父元素）和`position absoute（对于子元素），加上宽度、高度和位置设置，特别是对于子元素。看看下面代码片段中的设置。

.x {
  position: relative;
  top: 70px;
  height: 160px;
  background: #fa0;
}

.site-icon {
  position: absolute;
  width: 15%;
  height: 50%;
  top: 0;
  right: 12%;
  transform: translateY(-50%);
  background: #0fa;
}

<div class="x">
  <div class="site-icon"></div>
</div>