如何调整居中显示的iframe的页面垂直位置？附现有代码

嘿，这个问题处理起来很简单，我给你几个实用的方案，根据你想要的效果选就行：

方案1：直接给标题容器添加上边距（最便捷） #

你现在的iframe是放在<h3>标签里的，直接给这个<h3>加margin-top样式，就能让整个容器（包括里面的iframe）往下移动，数值可以按需调整：

<h3 style="text-align:center; margin-top: 50px;" > 
  <iframe src="http://88.90.5.113:12/customexportfile.htm" width="200" height="100" frameBorder="0" ></iframe> 
</h3>

小贴士：如果想让它适配不同屏幕，也可以用相对单位，比如margin-top: 10vh（表示视口高度的10%），这样在手机和电脑上的比例更协调。

方案2：单独给iframe添加上边距 #

如果你不想调整<h3>的位置，也可以直接给iframe本身加margin-top，效果类似：

<h3 style="text-align:center;" > 
  <iframe src="http://88.90.5.113:12/customexportfile.htm" width="200" height="100" frameBorder="0" style="margin-top: 50px;" ></iframe> 
</h3>

方案3：让iframe垂直居中在页面（进阶需求） #

如果你的目标是让iframe不仅下移，还能垂直居中在整个页面，可以用Flex布局给<body>设置样式，这样不管屏幕多大，它都会保持在中间位置：

<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      margin: 0; /* 清除默认边距 */
      justify-content: center;
    }
  </style>
</head>
<body>
  <h3 style="text-align:center;" > 
    <iframe src="http://88.90.5.113:12/customexportfile.htm" width="200" height="100" frameBorder="0" ></iframe> 
  </h3>
</body>

内容的提问来源于stack exchange，提问作者Rokas Šimas