如何在任何分辨率的屏幕下使徽标保持在视频组件的中心

Question

我有一个 React 组件，其中有一个中心带有公司徽标的视频，但是当我切换到手机等响应式屏幕时，徽标总是从视频中消失，我该如何解决这个问题？

电脑版

iPhone版

import videoJacare from '../imgs/ny4k.mp4';
import imgTest from '../imgs/LogoFecapFinanceOriginal2.png';
import styled from "styled-components";

function video(){
  return(
    <Intro>
      <Logo src={imgTest} alt="" />
      <Jacare
        src={videoJacare}
        poster={imgTest}
        loop
        autoplay="true"
        muted
        playsInline
        preload
        disablePictureInPicture
      >
        Seu navegador não suporta o elemento de vídeo.
      </Jacare>
    </Intro>
  );
}

const Jacare = styled.video`
width: 100%;         
  height: auto;        
  max-height: 80vh;    
  object-fit: cover;   
  align-items: center;
`

const Texto = styled.h1`
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
`

const Intro = styled.div`
  text-align: center;
  align-items: center;
  position: relative;
`

const Logo = styled.img`
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  color: #fff;
  max-width: 25%;
  max-height: 25%;
  transition: all 0.3s ease-in-out;
`

export default video;

我尝试过使用位置功能，用于徽标的 z-index 永远不会从视频中消失，但它确实出现了，但似乎没有任何效果。

Answer 1

据我了解，您的徽标的居中是通过

position: absolute

，并防止您的徽标与其他块重叠，请添加

Intro

组件

position: relative

。