居中 iframe

在网页中，经常会使用 <iframe> 标签来嵌入其他网页或者媒体资源。在某些情况下，我们希望将这个嵌入的内容居中显示，以提升用户体验。本文将介绍两种实现居中 iframe 的方法。

方法一：使用绝对定位和负边距

这种方法需要将 <iframe> 标签包裹在一个容器 <div> 中，并给容器设置 position: relative; 和 display: flex; 属性。然后，将 <iframe> 的 position 属性设置为 absolute;，并用 top、left、right、bottom 四个属性和负边距将其居中。

示例代码：

<div style="position: relative; display: flex; justify-content: center; align-items: center; height: 500px;">
  <iframe src="https://www.example.com" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%;" frameborder="0"></iframe>
</div>

解析：

• 容器 <div> 设置 position: relative; 和 display: flex;，使其成为一个相对定位的 flex 容器；
• justify-content: center; 和 align-items: center; 属性使容器内的元素在垂直和水平方向都居中显示；
• <iframe> 的 position 属性设置为 absolute;，使其脱离文档流，可以用于居中；
• top: 50%; left: 50%; 属性将 <iframe> 的左上角放置在容器的中心位置；
• transform: translate(-50%, -50%); 属性将 <iframe> 向上和向左移动自身宽高的一半，实现居中；
• width: 80%; height: 80%; 属性设置 <iframe> 的宽度和高度。

方法二：使用 text-align 属性

这种方法是将 <iframe> 标签放在一个 <div> 中，并将 <div> 的 text-align 属性设置为 center;，将 <iframe> 居中。

示例代码：

<div style="text-align: center;">
  <iframe src="https://www.example.com" style="width: 80%; height: 500px;" frameborder="0"></iframe>
</div>

解析：

• <div> 的 text-align 属性设置为 center;，使其内部内容水平居中；
• <iframe> 的宽度设置为 80%。

以上就是居中 <iframe> 的两种方法，读者可以根据自己的需要进行选择。