css 响应式定位问题?

Question

上图是一个网页头部的设计草图, 现在需要把网站Logo做成动态的, 其他内容固定不变, 有没有什么办法可以让这个logo在不同分辨率下保持居中?

补充说明

红色 + 蓝色区域是背景图片, 是不带有任何div的, 所以需要在蓝色区域放一个div, 在这个div里放logo

Answer 1

.logo-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 适当宽度;
  height: 100%;
  clip-path: polygon(33% 0, 66% 100%, 33% 100%, 0 0);
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Logo的样式 */
}