响应式和居中的 iFrame答案

【问题标题】：Responsive and centered iFrame响应式和居中的 iFrame
【发布时间】：2020-05-25 13:04:49
【问题描述】：

我希望 iFrame 具有响应性并在页面上水平居中，但我还希望它的最大宽度为 500 像素。现在我只成功地让它响应但不居中。

const VideoWrapper = styled.div`
  max-width: 500px;
`;

const IFrameContainer = styled.div`
  position: relative; 
  height: 0;
  padding-bottom: 88%;
  overflow: hidden;
  margin: 0 auto;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
`;

我选择了 88%，因为它是我视频的正确格式，响应式效果完美。

但是当我尝试添加带有对齐内容中心的 flex 显示时，iframe 会消失。左边距/右边距自动相同。

<VideoWrapper>
   <IFrameContainer>
      <iframe title="player" id="player" scrolling="no"></iframe>
   </IFrameContainer>
 </VideoWrapper>

这是 React 和样式化的组件代码。

感谢您的帮助。

【问题讨论】：

这可能是因为您的 iFrame 的宽度和高度为 100%，而父容器的高度为 0。当你添加flex-box 时，容器的宽度会额外缩小到 0，因为它默认只占用与其内容相同的空间，即 0。
...要使用margin: 0 auto，您想要居中的容器还需要一个小于其父容器的宽度；)
是的，实际上我需要做的就是在容器中添加100% 和margin: 0 auto 的宽度。非常感谢！

标签： html css iframe

【解决方案1】：

使用边距：0 自动；最大宽度。

【讨论】：