iframe居中问题：响应式视频容器的居中实现求助

方法1：让视频容器居中，iframe占满容器（推荐，响应式表现更优） #

这种方式既维持视频的16:9比例，又让整个视频容器在父元素中居中，iframe完全填充容器：

修改后的CSS代码：

/* 可选：给外层容器设置最大宽度，限制视频的最大显示尺寸 */
#video_container {
  max-width: 1200px;
  margin: 0 auto;
}

.youtube-video-container {
  padding-top: 56.25%; /* 固定16:9比例的核心设置 */
  height: 0px;
  position: relative;
  width: 60%; /* 控制视频的宽度占比 */
  margin: 0 auto; /* 让比例容器水平居中 */
}

.youtube-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

方法2：让iframe在容器内居中（保持iframe自身60%的尺寸） #

如果希望iframe本身仅占容器的60%大小并居中，调整iframe的定位属性即可：

修改后的CSS代码：

.youtube-video-container {
  padding-top: 56.25%;
  height: 0px;
  position: relative;
}

.youtube-video {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 配合top/left实现绝对定位元素的精准居中 */
  border: 0;
}

原理说明 #

• 方法1通过让比例容器居中，iframe填充容器，既保证了视频比例不受破坏，又实现了整体居中，适配各种屏幕尺寸的效果更好。
• 方法2利用CSS的transform: translate(-50%, -50%)，将绝对定位的iframe从左上角偏移到容器中心，无需修改容器布局，适合需要单独控制iframe尺寸的场景。

内容的提问来源于stack exchange，提问作者Spench