如何让text/html类型object标签中的嵌入网页居中且可滚动？

问题解决步骤 #

1. 修复嵌入内容居中问题 #

外层容器需要通过flex布局实现object的居中，同时确保内部加载的网页本身不破坏居中样式：

• 给外层div添加display: flex; justify-content: center; align-items: center;，强制容器内的object居中显示
• 若内部网页（P/ST/home.html）的body有默认边距，需在该页面的CSS中添加body { margin: 0; }，避免留白干扰居中效果

2. 实现整体滚动效果 #

overflow属性需要加在外层div上，而非object标签本身——因为object作为嵌入元素，其滚动行为由父容器控制：

• 给外层div添加overflow: auto;，当嵌入内容超出容器高度/宽度时，会显示滚动条实现整体滚动
• 保持object的width:100%; height:100%;设置，确保它填满父容器

修改后的完整代码 #

<div style="margin: 0 auto; width:100%; height:400px; border: 1px solid #fff; overflow: auto; display: flex; justify-content: center; align-items: center;">
    <object type="text/html" data="P/ST/home.html" style="width:100%; height:100%;"></object>
</div>

额外注意事项 #

• 如果内部网页有固定宽度的元素（比如超出容器宽度的表格），可以给内部页面的根容器添加max-width: 100%; overflow-x: auto;，避免横向溢出破坏整体布局
• 若仍存在滚动异常，检查内部网页是否设置了position: fixed;的元素，这类元素可能会脱离嵌入容器的滚动范围

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