移动到网站中心（如果可能，在移动设备上自动调整大小）
Posted
技术标签:
【中文标题】移动到网站中心（如果可能，在移动设备上自动调整大小）【英文标题】：Moving to center of website (If possible, auto adjusts size on mobile devices) 【发布时间】：2022-01-21 22:47:20 【问题描述】：抱歉英语不好。有什么想法可以在不使用边距等的情况下将其移动到中心？也许还有其他方法。
图像和视频是否可以在任何移动屏幕上自动调整？在我使用的代码下方：HTML
<div id="tv_container">
<iframe src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
#tv_container
width: 720px;
height: 480px;
position: relative;
#tv_container:after //frame
content: '';
display: block;
background: url('../home-img/framevid(4).png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
#tv_container iframe //video
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
【问题讨论】：
你看过 flex 吗？ 我没有尝试过灵活的盒子，会尝试这样做。我认为这可能会有所帮助。 【参考方案1】：您可以使用 3 种方式使图像居中：
-
将其边距设置为自动
margin: 0px auto;-
使用网格并在您的 CSS 中使用以下代码：
display: flex;
justify-content: center;
// justify-self: center;
// justify-items: center;
// align-items: center;
// ...-
我不推荐使用位置hosts的方式是将一个标签作为父标签，位置相等或相对，另一个标签（照片）作为子标签，并以其位置的四个主要方向设置在页面上。
至于图片在不同页面尺寸下的尺寸，不得不说设置页面的宽度不应该用像素，应该使用百分比，如下：
width: 80%;【讨论】：
会尝试每一个，希望它能满足我的需要。谢谢！【参考方案2】：我只是通过 JS 添加了 CSS 和 html 元素。这是我的代码：
#tv_container
width: 720px;
height: 480px;
position: relative;
#tv_container:after
content: '';
display: block;
background: url('../home-img/framevid(4).png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
#tv_container iframe
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
.frame
display: flex;
justify-content: center;
<body>
<section class="frame">
<div id="tv_container">
<iframe src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</body>【讨论】：
试过了，但还是有问题。但是，将修改其中的一些以使其正常工作。谢谢！【参考方案3】：将text-align: center 用于您的对象样式。
我不知道您要居中哪些对象，但它应该适用于所有对象。
【讨论】：
以上是关于移动到网站中心（如果可能，在移动设备上自动调整大小）的主要内容，如果未能解决你的问题，请参考以下文章