iframe 嵌入在屏幕调整大小时向左移动

Question

所以我制作了一个项目页面，其中 iframe 嵌入在屏幕调整大小时一直向左移动，但我希望它位于 centre 而不是左侧：

.hr {
  height: 5px;
  width: calc((160vw)/2);
  background-color: #181818;
  position: relative;
  border-width: 0;
}

.video {
  width: calc((160vw)/2);
  height: calc((90vw)/2); 
  border : 2px solid;
}

<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <body class='container'>

    <hr class='hr'>
    <br class='us'>

    <iframe frameBorder="0" class='video' src='https://www.youtube.com/embed/inBBuwcLwH8'></iframe>

    <br class='us'>
    <hr class='hr'>

    </body>

我试过将 margin 添加到左侧，但当屏幕未调整大小时它似乎移到了右侧

提前致谢！

Answer 1

将 display: block; margin: 0 auto; 添加到 iframe 标签

.hr {
  height: 5px;
  width: calc((160vw)/2);
  background-color: #181818;
  position: relative;
  border-width: 0;
}

.video {
  width: calc((160vw)/2);
  height: calc((90vw)/2); 
  border : 2px solid;
  margin: 0 auto;
  display: block;
}

<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <body class='container'>

    <hr class='hr'>
    <br class='us'>

    <iframe frameBorder="0" class='video' src='https://www.youtube.com/embed/inBBuwcLwH8'></iframe>

    <br class='us'>
    <hr class='hr'>

    </body>

iframe 嵌入在屏幕调整大小时向左移动

iframe embed moving towards the left on screen resize

html

css

fonts