Html 我怎样才能使这个iframe居中？

这是html

<div class="main_content">
    <section class="episodio">
      <article class="contenedor_episodios">
        <h2>Episodios</h2>
        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/2ySVrxGkN6n6frMTo9Nsrt"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/4kYCRYJ3yK5DQbP5tbfZby"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/5JxcIaIkN8zx3Zy7yD9snv"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/2Iibd5A6R7mxkCm4NwNmUn"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>
      </article>
    </section>
  </div>   
    

}

基于这个问题，我尝试了不同的解决方案来集中这个iFrame

但我不能将标题Eposidios或spotify Iframes放在中间

有人能告诉我我遗漏了什么吗

问候

编辑：

我正在使用css查询，移动视图运行良好，我认为问题在于它一直使用360像素移动视图的css代码

@媒体屏幕和（最小宽度：1024px）和（最大宽度：1440px）{

试试这个

.eposodio\u spotify{
宽度：500px；
高度：300px；
保证金：0自动；
}
.情节(spotify iframe){
宽度：100%；
身高：100%；
}

我的问题的解决方案是我有一个名为.rectangle\u background的div，因为我在以前的版本中删除了css，所以我使用的css根本不起作用。-Andresfjobs刚刚编辑了

nit：最好格式化代码，以便其他人更容易阅读。类似于ide@fin我会这样做，并更新发帖感谢您的推荐我找到了解决方案我的问题是我有一个名为.rectangle_background的div，因为我在以前的版本中删除了它，所以我使用的css根本不起作用。

    .main_content {
.episodio {
  grid-area: auto;
  padding-bottom: 100px;
  background: linear-gradient(#0000ff, #0000a3);
  .rectangle_background {
    .contenedor_episodio {
      display: grid;
      // justify-items: center;
      grid-template-columns: auto auto;
      .episodio_spotify {
        width: 500px;
        height: 300px;
        margin: 0 auto;
        display: flex; /* new */
        align-items: center; /* new */
        justify-content: center;
        //grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}