移动到网站中心（如果可能，在移动设备上自动调整大小）答案

【问题标题】：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 width="720" height="480" 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 吗？
我没有尝试过灵活的盒子，会尝试这样做。我认为这可能会有所帮助。

标签： javascript html css vue.js

【解决方案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 width="720" height="480" 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 用于您的对象样式。

我不知道您要居中哪些对象，但它应该适用于所有对象。

【讨论】：