如何将div居中到窗口？

Question

我想仅使用css和less来对中心进行居中。

这是我到目前为止所尝试的内容：

#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
    left: calc(~"`$(window).width()` / 2- 50px");
}

警告：

• 以上代码基于：using javascript calculated values in less
• 不要更改position: absolute，库正在放置它并像这样处理它。我简化了问题。
• 不要将window.width更改为50%，在我的情况下，div位于很多容器中。因此50%将引用其父级大小，而不是窗口。
• 不要添加带text-align: center;的容器，此div容器（父容器）也由库处理。

我只需要left语法来返回正确的偏移量。

JSFIDDLE

编辑：

来自 Nico O 评论，这是我在详细的CSS控制台中的内容：

编辑：

Nico O 指出这个错误来自我使用Chromium v​​.32并且仅从v.36支持vw语法这一事实：reference < / p>

Answer 1

#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
    left: 50%;
    margin-left:-50px;//Half width
}

我知道你说不要把50％留在左边，因为它会导致父母的宽度，但问题是它是相对于它的定位容器...如果你占用窗口大小的一半并放它在左边的值中，如果它的容器的位置是相对的或绝对的左边：0是它的边界而不是窗口边界。因此，为什么我认为这个答案会有所帮助。

否则，您需要这个片段，但我不太了解JS计算，所以不能说是否可能：

 ($(window).width()-$(this).offsetParent().offset())/2

它取决于窗口的宽度和左边的当前位置：0px将被应用。然后除以2，因为我们想要中心而不是完全正确。

Answer 2

#exampleSquare {
position: absolute;
height: 100px;
width: 100px;
background-color: gray;
left: calc(50vw - 100px);
top:calc(50vh - 100px);

}