计算元素相对于屏幕分辨率的位置

Question

我被困在这里。我的网站有固定宽度内容大小（1170像素）。 现在灯箱内容有CSS＆＃34;对＆＃34;设置为＆＃34; 0＆＃34; （图1）

但我需要你从开始内容开始（图片2）

嗯，理论上我知道那样做......

CSS 右:(宽度屏幕 - 1170px）/ 2

任何人都可以帮我一些jquery或javascript或css代码吗？

查看网站：http://iglesias.coroleu.com/

先谢谢

Answer 1

如果我认为这是正确的，你想要做的就是动态计算：

（屏幕宽度 - 1170px）/ 2

css calc（）函数可以帮助你。

设置此项（vw表示视口宽度）：

right: calc(100vw - 1170px) / 2

更多关于calc =＆gt; https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

通常，您可以通过应用css：

来居中div（或body）元素的内容

width: 1170px;
margin-left: auto;
margin-right: auto;

您可以将其应用于css，也可以直接应用于具有style属性的元素。 它的作用是，它将内容的宽度设置为1170px，然后让父浏览器在父元素更宽的情况下自动居中。

但是，我认真地建议你阅读一些css教程。这个问题太基础了。

像： https://www.w3.org/Style/Examples/007/center.en.html

Answer 3

试试这个

.mfp-container {
   right: calc((100% - 1170px) / 2);
}
.mfp-bg {
   right: calc((100% - 1170px) / 2);
}