Html 在调整桌面显示以保持手机的完整性时出现问题

我有一个嵌入式视频，我用CSS在手机上进行响应。因此，如果不调整当前使视频响应的CSS，我无法将视频集中在桌面显示器上。在移动设备上保持视频响应的同时，将视频居中的最佳方式是什么

我曾经尝试过乱搞CSS，结果却破坏了我所拥有的

<style>
body,h1 {font-family: "Raleway", Arial, sans-serif}
h1,h2,h5 {letter-spacing: 6px}
.w3-row-padding img {margin-bottom: 12px}
.responsive-image {
  height: auto;
  width: 55%;
}

.video-container {
position: relative;
padding-bottom: 45.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 853px;
height: 100%;
max-height: 480px;
}

</style>

正文，h1{字体系列：“Raleway”，Arial，无衬线}
h1，h2，h5{字母间距：6px}
.w3行填充img{margin bottom:12px}
.响应图像{
高度：自动；
宽度：55%；
}
.视频容器{
位置：相对位置；
垫底：45.25%；
填充顶部：30px；高度：0；溢出：隐藏；
}
.视频容器iframe，
.视频容器对象，
.视频容器嵌入{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
最大宽度：853px；
身高：100%；
最大高度：480px；
}

我使用的是w3学校模板，所以w3中心是我所有东西的中心

---

尝试添加

左侧：50%；转化：translateX（-50%）到iframe
 我想你在问两个问题

第一个问题是“如何保持视频的纵横比？”

但是-这是易碎的。。。我建议您改用。
您尝试过使用媒体查询吗？您可以为手机和桌面大小设置不同的css规则：
<div class="w3-center video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dy85sXnsJDs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<section class="section-name">

  <aside class="video">
    <iframe src="https://www.youtube.com/embed/dy85sXnsJDs"
      frameborder="0" width="560" height="315">  
    </iframe>
  </aside>

</section>

/* setup part a - the video aspect ratio */
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 52%; /* arbitrary for now */
  border: 1px solid blue;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* part b - the 'centering an element' */
.section-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid green;
}

.section-name .video {
  width: 600px;
}