如何将一个div居中到窗口？

Question

我想使用仅 css 和 less 来居中一个 div。

到目前为止，这是我尝试的：

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

警告：

• 以上代码基于：在Less中使用JavaScript计算值
• 不要更改position: absolute，因为一个库正在这样放置它并处理它。我简化了问题。
• 不要将window.width更改为50％，在我的情况下，div在很多容器内。因此，50％会引用其父大小，而不是窗口。
• 不要添加带有text-align: center;的容器，该div容器（父级）也由库处理。

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

JSFIDDLE

编辑：

根据Nico O的评论，这是我在详细的CSS控制台中拥有的内容：

编辑：

Nico O指出，此错误是因为我使用的是Chromium v.32，而vw语法仅在v.36以后受支持：参考资料

- Elfayer

---

我认为这会解决你的问题：http://jsfiddle.net/vKJmz/1/。你可以使用`100vw`，因为它是视口的宽度，也很可能是你需要的大小。 - Nico O

那就是问题所在，代码是一样的。我只需要写left: calc(~"50vw - 450px");因为使用了Less预处理。此外，这并没有在控制台中显示，我是在div的详细CSS中看到的。 - Elfayer

那似乎有些奇怪。你写的css是错误的。为什么你想要改变它呢？这行代码不需要进一步的改动。 - Nico O

如果我在文件中写入：left: calc(~"50vw - 450px");，结果为left: calc(50vw - 450px);。如果我写：left: calc(50vw - 450px);，结果为left: calc(-400vw);。参见：https://dev59.com/UGMm5IYBdhLWcg3wDrtR - Elfayer

让我们在聊天中继续这个讨论。 - Nico O

Answer 1

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

我知道你说不要在左侧放置50％，因为它会导致父元素的宽度，但问题是它相对于其定位的容器而言...如果您将窗口大小的一半放入左值中，则如果其容器的位置是相对或绝对的，则left：0就是其边框而不是窗口边框。因此，我认为这个答案会有所帮助。

否则，您需要使用此代码片段，但我不知道JS计算是否可以在less中实现：

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

它计算窗口宽度与应用左侧：0px的当前位置之间的差异。然后除以二，因为我们想要中心而不是完全靠右。

- Salketer

Answer 2

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

- David Onjuk

---

请发布一个描述 - Dennis Kriechel

Answer 3

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

如果它起作用，请使用此代码

- Smit