Bootstrap 5中使用ratio类时如何实现iframe居中？

要在保留ratio类的前提下让iframe居中，需做两个关键调整：

• 给外层ratio容器添加d-flex类，启用Flex布局，使justify-content-center和align-items-center生效，实现iframe在容器内的水平+垂直居中
• 给ratio容器设置合适的最大宽度（比如和iframe的width参数匹配的max-width: 500px），确保mx-auto能让容器本身在父级中水平居中

调整后的代码如下：

<div class="ratio ratio-4x3 d-flex justify-content-center align-items-center mx-auto" style="max-width: 500px;">
  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>

补充说明： #

• d-flex：将ratio容器转为Flex容器，让内部iframe可通过Flex属性实现居中
• justify-content-center：控制iframe在水平方向居中
• align-items-center：控制iframe在垂直方向居中（不需要可移除）
• mx-auto：让ratio容器自身在父元素中水平居中，此属性生效的前提是容器有明确的宽度限制（max-width或width）
• 原代码失效原因：Bootstrap的ratio类默认不是Flex容器，所以你添加的Flex布局属性无法起作用；同时未给容器设置宽度，mx-auto无法生效，导致容器占满父级宽度，iframe因自身设置或插件特性出现右对齐

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