html - 网站不以手机为中心

Question

我正在创建简单的网站。在桌面上，整个内容都居中。它也适用于改变浏览器的大小。 但是当我在手机上访问它时，一切都不像在桌面上那样居中

看看:http://piaskownica.lokalnamanufaktura.pl/metod2/

我认为我的用于居中的 css 包装类有问题。视频背景也不以桌面为中心。

.wrap {
  position: absolute;
  left: 50%;
  top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  width: 90%;
  height: 90%;
}

Answer 1

.x2-horizo​​ntal 的宽度为 380px，对于小屏幕来说太宽了。注意响应式设计中的固定宽度。

您的布局方式不理想。首先，考虑不支持 transform 的设备。

由于 position: absolute，视频控件不会使用 margin: auto 居中。您必须使用与其他内容相同的居中方法(即 left: 50% 然后将其拉回其宽度的 50%。)