Html 无论屏幕大小如何，如何将徽标放置在其下方div的一半上方

我需要在它下面的div中间放置一个logo，如下图所示，但我似乎无法做到完美。无论屏幕大小或浏览器大小如何，即使在调整浏览器大小的过程中，也需要进行一半

我使用这样的定位

.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实现这一点

---

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

最重要的是结合使用

位置：相对（对于父元素）和`绝对位置（对于子元素），再加上宽度、高度和位置设置（尤其是对于子元素）。看看下面代码段中的设置


.x{
位置：相对位置；
顶部：70像素；
高度：160px；
背景：#fa0；
}
.网站图标{
位置：绝对位置；
宽度：15%；
身高：50%；
排名：0；
右：12%；
转化：translateY（-50%）；
背景：#0fa；
}
您可以使用一个
absolute
容器，然后以这种方式定位徽标，而不是使用这种定位方式。此技术不取决于徽标的大小：


.header{位置：相对；边距：100px 0；}
.logo容器{位置：绝对；右侧：0；}
.logo{位置：绝对；右侧：0；顶部：50%；变换：translateY（-50%）；}
.container{背景色：#eef；边框：1px实心#ccf；边距底部：25px；填充顶部：50px；}

本页的其余部分。Lorem ipsum dolor sit amet，奉献精英。Suscipit ducimus，porro atque laboriosam。类似的建筑，解释性地表达自己的价值观，创造生命的全貌，无差别的个性，莫莱斯蒂亚斯·多洛尔·奎斯夸姆（molestias dolore quisquam）

本页的其余部分。Lorem ipsum dolor sit amet，奉献精英。在产期和产期，被驱避的小鼹鼠被认为是一种快速繁殖的软体动物


.header{
高度：500px；
宽度：100%；
边缘底部：300px；
}
艾康先生{
宽度：15%；
前-35%；
位置：绝对位置；
身高：40%；
右：11.9%；
背景色：#d9eff4；
最小宽度：200px；
最小高度：200px；
}.收割台容器{
位置：绝对位置；
背景色：#f6a68a；
底部：0px；
身高：70%；
宽度：100%；
}
@仅介质屏幕和（最大宽度：990px）{
艾康先生{
宽度：40%；
身高：40%；}
}
@仅介质屏幕和（最大宽度：440px）{
艾康先生{
宽度：50%；
身高：50%；}
}
@仅介质屏幕和（最大宽度：320px）{
艾康先生{
宽度：70%；
身高：40%；}
}

感谢您提供CSS，但您能否同时提供相关的HTML？没有它，回答这个问题几乎是不可能的。如果您可以更新您的问题以在一个列表中列出所有相关代码，这将有所帮助。如果您的HTML是在服务器端生成的，请发布输出。有关更多信息，请参阅有关的帮助文章：）我能够适应它，它工作了，为我节省了大量时间，非常感谢。